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.
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.
zoomTop: 200, // Zoom frame distance from top in pixels
zoomLeft: 560 // Zoom frame distance from left in pixels
Plugin options are shown bellow with their default values and explanation:
// Zoom frame distance from top in pixels
// Zoom frame distance from left in pixels
// Parent element of "leroy_zoom_frame"
// Image loading state message
// Image error message
error: "Image can't be loaded."