Jquery Image Zoom Plugin – ElevateZoom

Image Zoom is a lightweight and touch-compatible jQuery zoom plugin which allows you to zoom and pan an image using your mouse cursor or finger on touch devices. Image Zoom supports touch-enabled devices and is easily customisable with CSS.. The primary features of Image Zoom Plugin:

  • Fully Customisable
  • Coloured Tints
  • Fancybox Gallery Support
  • Variable zoom on mouse scroll
  • External Controls
  • Window Zoom, Lens Zoom and Inner Zoom
  • Free to use under MIT and GPL Licenses

Live Demo

1. Basic Zoom

2. Tints Zoom

3. Gallery & Lightbox

4. Inner Zoom

5. Lens Zoom

6. Mousewheel Zoom

You can scroll over the image to zoom in closer!

How to Use

Create a container where you want to render Image Zoom

<h1>Basic Zoom Example</h1>
<img id="zoom_01" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg"/>

Load jQuery library together with the Image Zoom library into your code

<script src='jquery-1.8.3.min.js'></script>
<script src='jquery.elevatezoom.js'></script>
<script>
    $('#zoom_01').elevateZoom({
        zoomType: "inner",
        cursor: "crosshair",
        zoomWindowFadeIn: 500,
        zoomWindowFadeOut: 750
    });
</script>

Source Code

Download

For more Advanced Usages, please check the demo page or visit the official website.