Image Zoom Using Simple Jquery

Image Zoom Using Simple Jquery

HTML

<script src="jquery.elevateZoom-3.0.8.min.js"></script>
<img id="responsive_img" src="http://igorlino.github.io/elevatezoom-plus/images/large/image1.jpg" data-zoom-image="http://igorlino.github.io/elevatezoom-plus/images/large/image1.jpg" />

CSS

/*Default*/
 #responsive_img {
    width:800px;
}
.responsive_default {
    display:inline-block;
    color: #159957;
}
.responsive_100, .responsive_600, .responsive_800 {
    display:none;
    color: #159957;
}
/*Target devices 100-599px*/
 @media only screen and (min-width: 100px) and (max-width: 599px) {
    #responsive_img {
        width:300px;
    }
    .responsive_100 {
        display:inline-block;
    }
    .responsive_default {
        display:none;
    }
}
/*Target devices 600-799 width*/
 @media only screen and (min-width: 600px) and (max-width: 799px) {
    #responsive_img {
        width:450px;
    }
    .responsive_600 {
        display:inline-block;
    }
    .responsive_default {
        display:none;
    }
}
/*Target devices 800-1199px*/
 @media only screen and (min-width: 800px) and (max-width: 1199px) {
    #responsive_img {
        width:600px;
    }
    .responsive_800 {
        display:inline-block;
    }
    .responsive_default {
        display:none;
    }
}

JavaScript

$(function () {

    initEZPlus();

    //Triggered when window width is changed.
    $(window).on("resize", function () {
        var windowWidth = $(window).width(), // get window width
            imgWidth = $("#responsive_img").width(); // get image width
        //Init elevateZoom
        initEZPlus();
        //display status
        $("#status").html("Status: Window resized!.");
        //display image and window width
        $("#imgWidth").html("Image width: " + imgWidth + "px" + "<br />" + "Window width: " + windowWidth + "px");
    });

    function initEZPlus() {
        $("#responsive_img").ezPlus({
            responsive: true,
            scrollZoom: false,
            showLens: true,

            tint: true,
            tintColour: '#0F0',
            tintOpacity: 0.5,
            respond: [{
                range: '600-799',
                tintColour: '#F00',
                zoomWindowHeight: 100,
                zoomWindowWidth: 100
            }, {
                range: '800-1199',
                tintColour: '#00F',
                zoomWindowHeight: 200,
                zoomWindowWidth: 200
            }, {
                range: '100-599',
                enabled: false,
                showLens: false
            }]
        });
    }
});