Simple jQuery Plugin that Will Allow Users to Zoom in Images

Image-Zoom-jQuery-Plugin

Image Zoom is a lightweight (1.5kb minified) and easy jQuery image zoom plugin that enables the visitor to zoom in/out images with mouse and touch events.

How to make use of it:

1. Download the plugin and include the next CSS & JavaScript files on the HTML web page.

<link rel="stylesheet" href="/path/to/dist/css/image-zoom.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/js/image-zoom.min.js"></script>

2. Attach the function to your image throughout the doc.

// Add Image Here
$(function(){
  $('#imageZoom').imageZoom();
});

3. Apply the image zoom functionality to all photos in a gallery.

<div class="my-gallery">
  // Add Images Here
  ...
</div>
$(function(){
  $('.my-gallery').imageZoom({
    $(this).imageZoom();
  });
});

4. Determine the zoom level.

$(function(){
  $('.my-gallery').imageZoom({
    $(this).imageZoom({
      zoom: 200
    });
  });
});

Zoom Images On Click/Tap, Image Zoom Plugin/Github


See Demo And Download

Official Website(Mario-Duarte): Click Here

This superior jQuery/javascript plugin is developed by Mario-Duarte. For extra Advanced Usages, please go to the official website.