Simple jQuery Image Zoom

Submitted by rinvizle on Wednesday, July 13, 2016 - 08:25.

In this tutorial, I will teach you how to create jQuery Image Zoom. It is a simple and easy to use jQuery image zoom that enlarge your images on mouse over, grab, click or toggle. And jQuery image zoom has a plugin. Simple jQuery image zoom lets you partially clip and confine large images on your site to a smaller container to save space, with the hidden portion accessible by dragging or panning inside the image. This script is great for embedding images on your page that users may also want to used in on to get a closer look.

Sample Code

jQuery Zoom & Library

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
<script src='jquery.zoom.js'></script>

And for the Plugin to Call

<script>
  $(document).ready(function(){
    $('#ex1').zoom();
    $('#ex2').zoom({ on:'grab' });
    $('#ex3').zoom({ on:'click' });     
    $('#ex4').zoom({ on:'toggle' });      
  });
</script>

Sample Image For toggle Result

For more tutorials just visit this website @www.sourcecodester.com and don't forget to Like and Share. Enjoy Coding.

Add new comment

77 views