After a short interval playing with jQuery Image Zoom plugin will completely extracted the Zoom functionality with magnifier and scroll zoom options, using swinxyzoom plugin. Its WordPress plugin that have amazing zoom options, The integration of swinxyzoom plugin  is just simple and quite easy.

The swinxyzoom is also similar to cloud zoom, ok lets start with integration.

First we required some JavaScript libraries just include it on the head section of your html file.

<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.1.min.js'></script>
<link rel='stylesheet' id='zoom-css'  href='css/zoom.css' type='text/css' media='all' />
<script type='text/javascript' src='js/jquery.nicescroll.min.js'></script>
<script type='text/javascript' src='js/jquery.slider.js'></script>
<script type='text/javascript' src='js/jquery.mousewheel.js'></script>
<script type='text/javascript' src='js/touch.js'></script>
<script type='text/javascript' src='js/zoom.js'></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('a#zoom1').swinxyzoom({mode:'dock', controls: false, size: '100%', dock: { position: 'right' } }); // dock window slippy lens
jQuery('.views-gallery a').click(function(e) {
e.preventDefault();
var $this = jQuery(this),
largeImage  = $this.attr('href');
smallImage  = $this.data('easyzoom-source');
if (!$this.parent().hasClass('thumbnail-active')) {
jQuery('a#zoom1').swinxyzoom('load', smallImage,  largeImage);
jQuery('.lightbox-btn').attr('href', largeImage);
jQuery('.views-gallery .slide.thumbnail-active').removeClass('thumbnail-active');
$this.parent().toggleClass('thumbnail-active');
}
});
});
</script>

ok now you added all required libraries next step is to add the zoom section html codes. just put these codes inside your body tag.

<div>
<ul>
<li> <a href="images/62.jpg"  data-easyzoom-source="images/62-440x600.jpg"> <img width="90" height="90" src="images/62-90x90.jpg" class="" alt="62" /> </a> </li>
<li> <a href="images/102.jpg"  data-easyzoom-source="images/102-440x600.jpg"> <img width="90" height="90" src="images/102-90x90.jpg" alt="102" /> </a> </li>
<li> <a href="images/112.jpg"  data-easyzoom-source="images/112-440x600.jpg"> <img width="90" height="90" src="images/112-90x90.jpg" alt="112" /> </a> </li>
<li> <a href="images/3.jpg"  data-easyzoom-source="images/3-440x600.jpg"> <img width="90" height="90" src="images/3-90x90.jpg" alt="3" /> </a> </li>
</ul>
</div>
<div>
<div > <a itemprop="image" href="images/62.jpg" id="zoom1" title="62" > <img class="" src="images/62-440x600.jpg"  alt="NICE PROMO DRESS" /> </a> </div>
<div></div>
</div>

Now see the magic, Your swinxyzoom plugin or jQuery image zoom plugin is done!.

Smart Image Zoom plugin with jQuery

In additionally you can have the following options for customizing the zoom plugin.

• mode : modes are available; dock, window, lens and slippy.
  Default value: dock
• damping : Increasing this value will slow the damping animation, false will disable.
  Default value: 8
• steps : Represents the number of zoom levels available for stepping in and out when using the +/- zoom buttons or mousewheel. Default value: 15
• zoom : Starting zoom level based on the available steps, the closer zoom is to steps the more zoomed in the initial view will be. Default value: 15
• controls : Whether or not the zoom control bar should be shown. Default value: true
• size : Controls the width of the preview image , width such as ‘50%’ , Default value: ‘actual’
• dock :  eg:
  'dock': { position: 'right' }
  position: can be one of; top, right, bottom or left.
• lens :  eg:
  'lens': { width: 200, height: 200 }
  width:  Default value: 200
  height:  Default value: 200:

Would you like to see a demo ? just click the below link.

Enjoy swinxyZoom jQuery plugin 🙂 🙂 🙂