A lightweigth and easy to use image zoom and magnify jQuery plugin with less than 4 KB.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
css Everything Nov 2, 2013
js Update jquery.leroy-zoom.js Dec 7, 2013
LICENSE Initial commit Nov 2, 2013
README.md Demo page url Nov 2, 2013
index.html Everything Nov 2, 2013
leroy-zoom.jquery.json jQuery manifest file Nov 2, 2013


Leroy Zoom - jQuery Plugin

A lightweigth and easy to use image zoom and magnify jQuery plugin with less than 4 KB.

How it works

This plugin works on a 2-steps zoom behavior:

  1. Show details of image in the medium version when user over the thumb image;
  2. Magnify and show details of the large image version when user click to "Magnify".

You'll 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.

Or let the demo speaks for itself: Leroy Zoom Demo

How to use

Call the JS and CSS of the plugin into the <head> section of your HTML page, as shown bellow. Change the path/url of this files to point to the right place where they are hosted. You can change the jQuery lib version too, but ensure plugin still working for that.

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

Set the markup of the picure in you HTML body. Note that the picure must be into a <a> tag to work:

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

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.

Now, make the Javascript apply the plugin behavior for the markup you just added. You can do that on your own way, or use the following script after the scripts included in you <head>:

<script type="text/javascript">
    $(document).ready(function() {
            zoomTop: 200, // Zoom frame distance from top in pixels
            zoomLeft: 560 // Zoom frame distance from left in pixels

That's it! You can use the demo page source code as guide to check if everything is ok.


Options are shown bellow with their default values and explanation:

    zoomTop: 200,                   // Zoom frame distance from top in pixels
    zoomLeft: 560,                  // Zoom frame distance from left in pixels
    parent: "body",                 // Parent element of "leroy_zoom_frame"
    preload: "Loading...",          // Image loading state message
    error: "Image can't be loaded." // Image error message

You can change the CSS as you want too.


Tested and working on IE9+, Chrome, Firefox, Opera and Safari.

PS.: Safari will show the zoom frame on square format :/. Other browsers works ok as a circle.


This plugin is based on product image zoom feature in Leroy Merlin e-commerce. It was designed by @tiagoux and develop by @edison as a jQuery plugin. It's also based on code principles and behavior of Alen Grakalic's EasyZoom Jquery Plugin.


Feel free to refactor, fix bugs, optimize, extend compatibilty or anything, keeping the behavior principles and "weight" of the plugin sending us suggestions through issues or pull-request. We'll appreciate. :)