Drag Image Zoom & Magnifier Plugin – jqzoom

File Size:615 KB
Views Total:411
Last Update:December 25, 2017
Publish Date:December 25, 2017
Official Website:Go to website
License:MIT

JQZoom is a powerful jQuery Zoom Plugin to create Image Inner Zoom & Magnifier effect for your images. It supports Standard zoom with thumbnails, Reverse zoom, Drag zoom, Resize,zoom popup custom position, fadein, fadeout effects.

How It Use :

1.  Use and include the files Jquery :

<script type='text/javascript' src='js/jquery-1.5.js'></script> 

<script type='text/javascript' src='js/jquery.jqzoom-core.js'></script>

<link rel="stylesheet" type="text/css" href="css/jquery.jqzoom.css">

2. Use and include the files Html :

<ul id="thumblist" class="clearfix" >
	<li><a class="zoomThumbActive" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small1.jpg',largeimage: './imgProd/triumph_big1.jpg'}"><img src='imgProd/thumbs/triumph_thumb1.jpg'></a></li>
	<li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small2.jpg',largeimage: './imgProd/triumph_big2.jpg'}"><img src='imgProd/thumbs/triumph_thumb2.jpg'></a></li>
	<li><a  href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small3.jpg',largeimage: './imgProd/triumph_big3.jpg'}"><img src='imgProd/thumbs/triumph_thumb3.jpg'></a></li>
</ul>

3.  Use and include the file jQuery :

<script type="text/javascript">
$(document).ready(function() {
	$('.jqzoom').jqzoom({
            zoomType: 'standard', // zoom type
            lens:true,
            preloadImages: false,
            alwaysOn:false
        });
	
});
</script>

 

Done 🙂