jquery-zoom-images-izoomify

jQuery Zoom Images On Hover or Touch and Hold | jquery-izoomify

by

jquery-izoomify is an image zoom plugin. It creates a flawless zoom effect on your photos. Inspired by the jquery-zoom plug-in for zooming and panning of images using mouse scroll, mouse movement, and touch events.

magnify image on hover, jquery image magnifier on mouse over, zoom image on mouseover using jquery, image magnifier, product image zoom on hover jquery

Settings

  • Target – the main container. The default is false.
  • URL – The URL of the image to display on hover. The default is false.
  • Zoom – Enlarge or enlarge the image. The default is 1.2.
  • Touch – Interact with touch events. The default is correct.
  • Duration – the speed of zooming in/out of the image. The default is 120.
  • Callback – The function is called as soon as it is loaded. default error.

How to make use of it:

1. Include the jquery.izoomify.js after you’ve got loaded the most recent jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jquery.izoomify.js"></script>

2. Add the picture to be magnified to a container.

<div class="example">
  <img src="image.jpg" alt="Image To Zoom" />
</div>

3. Call the izoomify plugin on the parent container and achieved.

$(function(){
  $('.target').izoomify();
});

4. Load the hi-res model of the picture when magnifying.

<div class="example">
  <img
    src="thumb.jpg"
    data-izoomify-url="full.jpg"
    alt="Image To Zoom"
  />
</div>
// OR Via JavaScript
$('.example').izoomify({
  url: "full.jpg",
});

5. Set the zoom factor.

<div class="example">
  <img
    src="thumb.jpg"
    data-izoomify-url="full.jpg"
    data-izoomify-magnify="2.5"
    alt="Image To Zoom"
  />
</div>
// OR Via JavaScript
$('.example').izoomify({
  url: "full.jpg",
  magnify: 2.5
});

6. Set the period of the zoom in/out animation.

<div class="example">
  <img
    src="thumb.jpg"
    data-izoomify-url="full.jpg"
    data-izoomify-duration="300"
    alt="Image To Zoom"
  />
</div>
// OR Via JavaScript
$('.example').izoomify({
  url: "full.jpg",
  duration: 300,
});

7. Enable/disable contact & maintain help.

$('.example').izoomify({
  url: "full.jpg",
  touch: false,
});

8. Trigger a function after the plugin has been loaded.

$('.example').izoomify({
  url: "full.jpg",
  callback: function () {
    //your code here..
  }
});

Magnify Images On Hover Or Touch & Hold, jquery-izoomify Plugin/Github, image magnifier, image magnifier using jquery, image zoom on hover slider jquery

See Demo And Download

Demo
Download

Official Website(abiacarl): Click Here

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

Leave a Comment