Leroy Zoom – A lightweight jQuery image zoom and magnifier plugin

Leroy Zoom is a jQuery image zoom and magnifier plugin, small and easy to use in web projects.

jQuery image zoom and magnifier plugin

Image zoom and magnify jQuery plugin, with less than 4 KB!

The plugin works on a 2-steps zoom behavior:

– show details of image in the medium version when user over the thumb image

– magnify and show details of the large image version when user click to “Magnify”

We need three versions of the same picture with different dimensions (small, medium, large). The first version (small) is shown by default and is the one which user will over the mouse to view the first-step details. Then, the user can “click to magnify” to see the second-step details of image and the large picture version is used for this.

jQuery image zoom and magnifier plugin
jQuery image zoom and magnifier plugin

How to use

<link rel="stylesheet" type="text/css" href="jquery.leroy-zoom.css">
<script src="jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.leroy-zoom.js"></script>

Now just set the markup of the picure in you HTML body:

<a href="#" id="demo-trigger" data-medium-url="sample/medium.jpg"
   data-large-url="sample/large.jpg">
    <img src="sample/small.jpg" />
</a>

Please pay attention to data-medium-url and data-large-url attributes of the “a” tag.

Put the medium and large image url versions here. You can keep they blank if for some reason the bigger images are missing, then zoom will not start in this case.

Let’s JS:

$(document).ready(function() {
  $("#demo-trigger").leroyZoom({
    zoomTop: 200, // Zoom frame distance from top in pixels
    zoomLeft: 560 // Zoom frame distance from left in pixels
  });
});

That’s it!

Plugin options are shown bellow with their default values and explanation:


$("#demo-trigger").leroyZoom({
    // Zoom frame distance from top in pixels
    zoomTop: 200,                   
    // Zoom frame distance from left in pixels
    zoomLeft: 560,                  

    // Parent element of "leroy_zoom_frame"
    parent: "body",                 

    // Image loading state message
    preload: "Loading...",        
  
    // Image error message
    error: "Image can't be loaded."
});

You can change the CSS as you want too.

License:

Apache License

Demo:

http://edison.github.io/leroy-zoom

Get this jQuery image zoom solution from GitHub:

https://github.com/edison/leroy-zoom

See also:

jQuery magnifying glass zoom plugin

ImageLens – A lens effect image zoom plugin

Jquery Image Zoom Plugin

Enjoy!

Share:Share on Facebook1Share on Google+0Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1