How To Use jQuery Zoom Plugin elevateZoom Example

Elevatezoom is a jQuery image zoom plug-in, which supports a variety of zoom methods, powerful and simple. There are three kinds of zooming effect, the picture is clear and the effect is practical. This article will tell you how to use it.

1. jQuery ElevateZoom Plugin Characteristic.

  1. Fully customizable.
  2. Support 3 zoom style: Window Zoom, Lens Zoom, and Inner Zoom.
  3. Variable zoom on mouse scroll.
  4. Free to use under MIT and GPL Licenses.
  5. Colored tints.
  6. External controls.

2. jQuery ElevateZoom Plugin Attributes.

You can read the post to learn more about the jQuery elevateZoom plugin attributes.

3. jQuery ElevateZoom Plugin Example Source Files.

├── images
│   ├── image01.png
│   ├── image02.png
│   ├── image03.png
│   ├── image1.png
│   ├── image2.png
│   └── image3.png
├── index.html
└── js
    └── jquery.elevatezoom.min.js

3.1 index.html.

<!DOCTYPE html>

    <meta charset='utf-8' />
    <script src="" type="text/javascript"></script>
    <script src="js/jquery.elevatezoom.min.js"></script>
        li {
            list-style: none;

        ul {
            display: flex;
            /* flex-direction: column; */
            justify-content: space-around

        h1 {
            text-align: center;
            margin: 50px 50px

        body {
    width: 100%;
    height: 200%;
    background-color: hsla(0,0%,15%,1.00);			

            <img id="zoom_01" src='images/image1.png' data-zoom-image="images/image01.png" />
            <img id="zoom_02" src='images/image2.png' data-zoom-image="images/image02.png" />
            <img id="zoom_03" src='images/image3.png' data-zoom-image="images/image03.png" />
        function zoom(element, type, custors) {
                zoomType: type,
                cursor: custors,
                zoomWindowFadeIn: 500,
                zoomWindowFadeOut: 750
        zoom($('#zoom_01'), "inner", "cursor");
        zoom($('#zoom_02'), "window", "crosshair");
        zoom($('#zoom_03'), "lens", "default");


3.2 js/jquery.elevatezoom.min.js.

Please download the js/jquery.elevatezoom.min.js file from jQuery Zoom Plugin. The js file jquery.elevatezoom.min.js version that is used in this example is 3.0.8.

3.3 Example Images.

  1. image1.png – image01.png, image2.png – image02.png and image3.png – image03.png are 3 pair of zoom images.

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.