jQZoom Evolution, javascript image magnifier
Tweet
Demo
1) Standard Zoom
2) Reverse Zoom
3) Zoom without lens
4) Custom positioning
5) Fade out effect while hiding
6) Fixed IE6- select box bug(for IE)
JAVASCRIPT (Mouseover the image.)
var options = { zoomWidth: 250, zoomHeight: 250 } $(".jqzoom").jqzoom(options);
JAVASCRIPT (Mouseover the image.)
var options2 = { zoomWidth: 250, zoomHeight: 250, zoomType:'reverse' } $(".jqzoom2").jqzoom(options2);
JAVASCRIPT (Mouseover the image.)
var options3 = { zoomWidth: 200, zoomHeight: 200, xOffset: 20, title: false, lens:false } $(".jqzoom3").jqzoom(options3);
JAVASCRIPT (Mouseover the image.)
var options4 = { zoomWidth: 300, zoomHeight: 200, position : 'right', yOffset :-100, xOffset :100, title :false } $(".jqzoom4").jqzoom(options4);
JAVASCRIPT (Mouseover the image.)
var options5 = { zoomWidth: 250, zoomHeight: 250, showEffect:'show', hideEffect:'fadeout', fadeoutSpeed: 'slow', title :false } $(".jqzoom5").jqzoom(options5);
JAVASCRIPT (Mouseover the image.)
var options6 = { zoomWidth: 250, zoomHeight: 250 } $(".jqzoom6").jqzoom(options6);HTML CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML lang=en_US xml:lang="en_US" xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>jQZoom Evolution, javascript image magnifier</TITLE>
<SCRIPT src="http://www.phpasks.com/blogs/wp-content/uploads/2009/12/jquery-1.3.2.min.js" type=text/javascript></SCRIPT>
<LINK href="http://www.phpasks.com/blogs/wp-content/uploads/2009/12/jqzoom.css" type=text/css rel=stylesheet>
<SCRIPT src="http://www.phpasks.com/blogs/wp-content/uploads/2009/12/jquery.jqzoom1.0.1.js" type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>
$(document).ready(function(){
$(function() {
var options =
{
zoomWidth: 250,
zoomHeight: 250
}
$(".jqzoom").jqzoom(options);
var options2 =
{
zoomWidth: 250,
zoomHeight: 250,
zoomType:'reverse'
}
$(".jqzoom2").jqzoom(options2); /*da sistemare top/bottom*/
var options3 =
{
zoomWidth: 200,
zoomHeight: 200,
xOffset: 20,
title: false,
lens:false
}
$(".jqzoom3").jqzoom(options3); /*da sistemare top/bottom*/
var options4 =
{
zoomWidth: 300,
zoomHeight: 200,
position : 'right',
yOffset :-100,
xOffset :100,
title :false
}
$(".jqzoom4").jqzoom(options4); /*da sistemare errore nella eliminazione zoom window*/
var options5 =
{
zoomWidth: 250,
zoomHeight: 250,
showEffect:'show',
hideEffect:'fadeout',
fadeoutSpeed: 'slow',
title :false
}
$(".jqzoom5").jqzoom(options5);
var options6 =
{
zoomWidth: 250,
zoomHeight: 250
}
$(".jqzoom6").jqzoom(options6); /*da sistemare top/bottom*/
});
$('.expand').click(function(){
var href= jQuery(this).attr('href');
var elclass = href.match('#([a-zA-Z]+)([0-9]+)');
if(elclass[1] == 'html')
{
jQuery('.html'+elclass[2]+'div').show();
jQuery('.js'+elclass[2]+'div').hide();
}else
{
jQuery('.html'+elclass[2]+'div').hide();
jQuery('.js'+elclass[2]+'div').show();
}
jQuery(this).addClass('alert').siblings('a').removeClass('alert');
return false;
});
});
</SCRIPT>
<BODY>
<DIV id=maincontent><!-- start maincontent -->
<DIV id=examples>
<!-- start examples section -->
<STRONG>Example 1 - Standard Zoom</STRONG> <BR>
<DIV><!-- demo1 container-->
<P><A title="Kawasaki Green" href="http://www.mind-projects.it/projects/jqzoom/demoimg/kawasakigreen.jpg" name=demo1><IMG title="Kawasaki Green" style="BORDER-RIGHT: #666 1px solid; BORDER-TOP: #666 1px solid; BORDER-LEFT: #666 1px solid; BORDER-BOTTOM: #666 1px solid" src="jQZoom_files/kawasakigreen_small.jpg"> </A></P>
<P><A href="http://www.mind-projects.it/projects/jqzoom/demos.php#js1">JAVASCRIPT</A> (Mouseover the image.) </P>
<DIV><PRE><SPAN></SPAN><SPAN>var </SPAN><SPAN>options </SPAN><SPAN>=
{
</SPAN><SPAN>zoomWidth</SPAN><SPAN>: </SPAN><SPAN>250</SPAN><SPAN>,
</SPAN><SPAN>zoomHeight</SPAN><SPAN>: </SPAN><SPAN>250
</SPAN><SPAN>}
$(</SPAN><SPAN>".jqzoom"</SPAN><SPAN>).</SPAN><SPAN>jqzoom</SPAN><SPAN>(</SPAN><SPAN>options</SPAN><SPAN>);</SPAN>
</PRE></DIV>
</DIV><!-- end demo1 container-->
<STRONG>Example 2 - Reverse Zoom</STRONG> <BR>
<DIV><!-- demo2 container-->
<P><A title=Kawasaki href="http://www.mind-projects.it/projects/jqzoom/demoimg/kawasakiblack.jpg" name=demo2><IMG title=Kawasaki style="BORDER-RIGHT: #666 1px solid; BORDER-TOP: #666 1px solid; BORDER-LEFT: #666 1px solid; BORDER-BOTTOM: #666 1px solid" src="jQZoom_files/kawasakiblack_small.jpg"> </A></P>
<P><A href="http://www.mind-projects.it/projects/jqzoom/demos.php#js2">JAVASCRIPT</A> (Mouseover the image.) </P>
<DIV><PRE><SPAN> </SPAN><SPAN>var </SPAN><SPAN>options2 </SPAN><SPAN>=
{
</SPAN><SPAN>zoomWidth</SPAN><SPAN>: </SPAN><SPAN>250</SPAN><SPAN>,
</SPAN><SPAN>zoomHeight</SPAN><SPAN>: </SPAN><SPAN>250</SPAN><SPAN>,
</SPAN><SPAN>zoomType</SPAN><SPAN>:</SPAN><SPAN>'reverse'
</SPAN><SPAN>}
$(</SPAN><SPAN>".jqzoom2"</SPAN><SPAN>).</SPAN><SPAN>jqzoom</SPAN><SPAN>(</SPAN><SPAN>options2</SPAN><SPAN>);</SPAN>
</PRE></DIV></DIV><!-- end demo2 container-->
<STRONG>Example 3 - Zoom without lens</STRONG> <BR>
<DIV><!-- demo3 container-->
<P><A title=shoes href="http://www.mind-projects.it/projects/jqzoom/demoimg/shoe2_big.jpg" name=demo3><IMG title=shoes style="BORDER-RIGHT: #666 1px solid; BORDER-TOP: #666 1px solid; BORDER-LEFT: #666 1px solid; BORDER-BOTTOM: #666 1px solid" src="jQZoom_files/shoe2_small.jpg"> </A></P>
<P><A href="http://www.mind-projects.it/projects/jqzoom/demos.php#js3">JAVASCRIPT</A> (Mouseover the image.) </P>
<DIV><PRE><SPAN> </SPAN><SPAN>var </SPAN><SPAN>options3 </SPAN><SPAN>=
{
</SPAN><SPAN>zoomWidth</SPAN><SPAN>: </SPAN><SPAN>200</SPAN><SPAN>,
</SPAN><SPAN>zoomHeight</SPAN><SPAN>: </SPAN><SPAN>200</SPAN><SPAN>,
</SPAN><SPAN>xOffset</SPAN><SPAN>: </SPAN><SPAN>20</SPAN><SPAN>,
</SPAN><SPAN>title</SPAN><SPAN>: </SPAN><SPAN>false</SPAN><SPAN>,
</SPAN><SPAN>lens</SPAN><SPAN>:</SPAN><SPAN>false
</SPAN><SPAN>}
$(</SPAN><SPAN>".jqzoom3"</SPAN><SPAN>).</SPAN><SPAN>jqzoom</SPAN><SPAN>(</SPAN><SPAN>options3</SPAN><SPAN>);</SPAN>
</PRE></DIV></DIV>
<!-- end demo3 container-->
<STRONG>Example 4 - Custom positioning</STRONG> <BR>
<DIV><!-- demo4 container-->
<P><A title=surf href="http://www.mind-projects.it/projects/jqzoom/demoimg/surf.jpg" name=demo4><IMG title=surf style="BORDER-RIGHT: #666 1px solid; BORDER-TOP: #666 1px solid; BORDER-LEFT: #666 1px solid; BORDER-BOTTOM: #666 1px solid" src="jQZoom_files/surf_small.jpg"> </A></P>
<P><A href="http://www.mind-projects.it/projects/jqzoom/demos.php#js4">JAVASCRIPT</A> (Mouseover the image.) </P>
<DIV><PRE><SPAN> </SPAN><SPAN>var </SPAN><SPAN>options4 </SPAN><SPAN>=
{
</SPAN><SPAN>zoomWidth</SPAN><SPAN>: </SPAN><SPAN>300</SPAN><SPAN>,
</SPAN><SPAN>zoomHeight</SPAN><SPAN>: </SPAN><SPAN>200</SPAN><SPAN>,
</SPAN><SPAN>position </SPAN><SPAN>: </SPAN><SPAN>'right'</SPAN><SPAN>,
</SPAN><SPAN>yOffset </SPAN><SPAN>:-</SPAN><SPAN>100</SPAN><SPAN>,
</SPAN><SPAN>xOffset </SPAN><SPAN>:</SPAN><SPAN>100</SPAN><SPAN>,
</SPAN><SPAN>title </SPAN><SPAN>:</SPAN><SPAN>false
</SPAN><SPAN>}
$(</SPAN><SPAN>".jqzoom4"</SPAN><SPAN>).</SPAN><SPAN>jqzoom</SPAN><SPAN>(</SPAN><SPAN>options4</SPAN><SPAN>);</SPAN>
</PRE></DIV></DIV><!-- end demo4 container-->
<STRONG>Example 5 - Fade out effect while hiding</STRONG> <BR>
<DIV><!-- demo5 container-->
<P><A title=poster href="http://www.mind-projects.it/projects/jqzoom/demoimg/poster.jpg" name=demo5><IMG title=poster style="BORDER-RIGHT: #666 1px solid; BORDER-TOP: #666 1px solid; BORDER-LEFT: #666 1px solid; BORDER-BOTTOM: #666 1px solid" src="jQZoom_files/poster_small.jpg"> </A></P>
<P><A href="http://www.mind-projects.it/projects/jqzoom/demos.php#js5">JAVASCRIPT</A> (Mouseover the image.) </P>
<DIV><PRE><SPAN> </SPAN><SPAN>var </SPAN><SPAN>options5 </SPAN><SPAN>=
{
</SPAN><SPAN>zoomWidth</SPAN><SPAN>: </SPAN><SPAN>250</SPAN><SPAN>,
</SPAN><SPAN>zoomHeight</SPAN><SPAN>: </SPAN><SPAN>250</SPAN><SPAN>,
</SPAN><SPAN>showEffect</SPAN><SPAN>:</SPAN><SPAN>'show'</SPAN><SPAN>,
</SPAN><SPAN>hideEffect</SPAN><SPAN>:</SPAN><SPAN>'fadeout'</SPAN><SPAN>,
</SPAN><SPAN>fadeoutSpeed</SPAN><SPAN>: </SPAN><SPAN>'slow'</SPAN><SPAN>,
</SPAN><SPAN>title </SPAN><SPAN>:</SPAN><SPAN>false
</SPAN><SPAN>}
$(</SPAN><SPAN>".jqzoom5"</SPAN><SPAN>).</SPAN><SPAN>jqzoom</SPAN><SPAN>(</SPAN><SPAN>options5</SPAN><SPAN>);</SPAN>
</PRE></DIV></DIV><!-- end demo5 container-->
<STRONG>Example 6 - Fixed IE6- select box bug(for IE)</STRONG> <BR>
<DIV><!-- demo6 container-->
<P style="POSITION: relative"><A title=Vespa href="http://www.mind-projects.it/projects/jqzoom/demoimg/vespa.jpg" name=demo6><IMG title=vespa_small.jpg style="BORDER-RIGHT: #666 1px solid; BORDER-TOP: #666 1px solid; BORDER-LEFT: #666 1px solid; BORDER-BOTTOM: #666 1px solid" src="jQZoom_files/vespa_small.jpg"> </A><SELECT style="LEFT: 380px; POSITION: absolute; TOP: 10px"><OPTION selected>Fixed IE6 select boxes bug</OPTION></SELECT> </P>
<P><A href="http://www.mind-projects.it/projects/jqzoom/demos.php#js6">JAVASCRIPT</A> (Mouseover the image.) </P>
<DIV><PRE><SPAN> </SPAN><SPAN>var </SPAN><SPAN>options6 </SPAN><SPAN>=
{
</SPAN><SPAN>zoomWidth</SPAN><SPAN>: </SPAN><SPAN>250</SPAN><SPAN>,
</SPAN><SPAN>zoomHeight</SPAN><SPAN>: </SPAN><SPAN>250
</SPAN><SPAN>}
$(</SPAN><SPAN>".jqzoom6"</SPAN><SPAN>).</SPAN><SPAN>jqzoom</SPAN><SPAN>(</SPAN><SPAN>options6</SPAN><SPAN>);</SPAN>
</PRE></DIV></DIV><!-- end demo6 container-->
</DIV>
</DIV>
</BODY></HTML>
No comments yet.