Leroy Zoom

Leroy Zoom is a lightweigth and easy to use image zoom and magnify jQuery plugin with less than 4 KB. 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”

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: edison.github.io

1. INCLUDE CSS AND JS FILES

<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>

2. HTML

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

3. JAVASCRIPT

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

4. OPTIONS

$("#demo-trigger").leroyZoom({
    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
});