How To Zoom Image Onclick Using Jquery

by

Today, we are going to learn how to create a zoom effect on image click using jQuery. This effect is quite popular in image galleries and product catalogs where users can click on an image to see it enlarged. In this tutorial, we will use the power of jQuery to easily achieve this effect.

Prerequisites

Before we begin, make sure you have the following resources ready:

  • An HTML page with an image element
  • jQuery library included in your project

Step 1: Create an HTML structure

First, create the basic HTML structure for your page and include an image that you want to apply the zoom effect to. Here’s an example of the HTML structure: 

    
    

    
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Zoom Image On Click Using jQuery</title>
    

    
        <img src="path/to/your/image.jpg" alt="Your Image" id="zoomImage">
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Step 2: Write the jQuery script

Now, let’s write the jQuery script to apply the zoom effect on the image. We will listen for the click event on the image and toggle the zoom class when the image is clicked. Here’s an example of how to do this: 

    <script>
        $(document).ready(function () {
            $("#zoomImage").click(function () {
                $(this).toggleClass("zoom");
            });
        });
    </script>

Step 3: Add the CSS styles

Finally, we need to define the CSS styles for the zoom class. In this example, we will set the width and height of the image to 200% when the zoom class is applied, giving the appearance of a zoom effect. Add the following CSS code inside the head tag or in an external stylesheet: 

    <style>
        .zoom {
            width: 200%;
            height: 200%;
            transform: scale(2);
            transition: all 0.5s;
        }
    </style>

Conclusion

That’s it! With just a few lines of jQuery and CSS, you can now create a zoom effect on image click. Your users will be able to enlarge images on your website by simply clicking on them. This effect can be further customized by adding more CSS styles and animation effects as per your requirements.