Image Zoom Effect using JavaScript

Submitted by alpha_luna on Wednesday, July 6, 2016 - 17:14.

This is simple coding for Image Zoom Effect using JavaScript. Kindly hover the cursor over the image to view the zoom effect. Hope you find this useful to your project.

Creating Markup

This simple HTML source code contains the list of an image where the user hovers the cursor to view the zoom effect.

        <div id="container">
        <img id="zoom_zoom" src="small/1.jpg" data-zoom-image="large/1.jpg"/>
        <div id="gallery_image">
            <a href="#" data-image="small/1.jpg" data-zoom-image="large/1.jpg"> 
                <img id="zoom_zoom" src="thumb/1.jpg" /> 
            </a> 
            <a href="#" data-image="small/2.jpg" data-zoom-image="large/2.jpg"> 
                <img id="zoom_zoom" src="thumb/2.jpg" /> 
            </a> 
            <a href="#" data-image="small/3.jpg" data-zoom-image="large/3.jpg"> 
                <img id="zoom_zoom" src="thumb/3.jpg" /> 
            </a> 
            <a href="#" data-image="small/4.jpg" data-zoom-image="large/4.jpg"> 
                <img id="zoom_zoom" src="thumb/4.jpg" /> 
            </a> 
        </div>
    </div>

As you can see in the image below. result

Creating Script for the Zoom Effect

$(document).ready(function(){
   
        $("#zoom_zoom").elevateZoom({
                gallery:'gallery_image',
                cursor: 'pointer',
                galleryActiveClass: 'active',
                imageCrossfade: true,
                tint:true, 
                tintColour:'#FF9999', 
                tintOpacity:0.5,
        });
        $("#zoom_zoom").bind("click", function(e) { 
                var ez = $('#zoom_zoom').data('elevateZoom');   
                $.fancybox(ez.getGalleryList()); 
                return false; 
        });
});

Hope that this tutorial will help you a lot. So what can you say about this work? Share your thoughts in the comment section below or email me at [email protected]. Practice Coding. Thank you very much.

Add new comment

63 views