Add Img to DIV and Zoom the Image at the Center Using jQuery

This is not a Plug-in. It’s simply a work around to zoom an image using jQuery – Responsive and Browser Compatible. What I am going to show you here in this article is to add the source of an <img> element to a DIV and animatedly zoom in and out the image at the center of the screen using jQuery and some CSS.

The CSS in-fact is responsible for centering the DIV with the image. I am using few jQuery methods to add and animate the image. The DIV that I have mentioned will serve as a container and will remain hidden. The idea is to get the image from <img> element, add it to the hidden DIV element and animatedly show the DIV right at the center of the screen.

It’s a neat animation example. However, I should tell two more things that are important to you. First, the zoom effect is responsive, that is, it will fit in all small devices. Second, its browser compatible, that is, you can run code on a variety of browsers.

Browser Support:
Chrome 39.0 - Yes | FireFox 34.0 - Yes | Internet Explorer 10 - Yes | Safari - Yes

See this demo

If you are good with JavaScript, then I am sure the below link is useful. Check it out.

The Markup and CSS

<html>
<head>
    <title>Zoom Image Example using jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

    <style>
        #imgContainer {
            display:none;
            position:fixed;
            width:100%;
            height:100%;
            padding-top:50px;
            text-align:center;
            border:0;top:0;right:0;left:0;
            overflow-x:auto;overflow-y:hidden;z-index:9999;
            background-color:rgba(255, 255, 255, 0.95);
            cursor:-webkit-zoom-out;cursor:-moz-zoom-out;cursor:zoom-out;
            -webkit-box-align:center;-webkit-box-pack:center;
            -webkit-transition:200ms opacity;-webkit-perspective:1000;}
        .zooimg  {
            display:block;
            position:static;
            margin:0 auto;
            padding:5px;
            background-color:#F4F4F4;
            webkit-box-shadow:6px 0 10px rgba(0,0,0,0.2), -6px 0 10px rgba(0,0,0,0.2);
            -moz-box-shadow:6px 0 10px rgba(0,0,0,0.2), -6px 0 10px rgba(0,0,0,0.2);
            box-shadow:6px 0 10px rgba(0,0,0,0.2), -6px 0 10px rgba(0,0,0,0.2);
            overflow:auto;
        }
        .zooimg img {
            display:block;
            border:none;
            margin:0 auto;
            width:auto;height:auto;
            max-width:100%;max-height:100%;
            -webkit-user-select:none;
        }
    </style>
</head>

<body>
    <p>Roll the mouse over the image and click it!</p>

    <p style="text-align:center;">
        <img src="https://www.encodedna.com/jquery/demo/MOTORSPORT.jpg" 
            id="img" width="50%" alt="" title="" />
    </p>
    <div id="imgContainer">
        <div class="zooimg" id="divimg"></div>
    </div>
</body>

<script>
    $(document).ready(function () {
        $('#img').mouseover(function () {
            $(this).css("cursor", "pointer");
        });

        $("#img").click(function () {
            var img = new Image();
            img.src = this.src;

            $('#divimg')
                .empty()
                .prepend(img);

            $('#imgContainer')
                .animate({ width: "toggle" }, 500).show();
        });

        $("#imgContainer").click(function () {
            $("#imgContainer")
                .animate({ width: "toggle" }, 1000);
        });
    });
</script>
</html>

Try it

I am showing the image using <img> element. When the page loads, you will see a little thumbnail of the image. Later in the script, I have written the code that will show a bigger or the real size of the image. The image click event will first get the image source and in assign the source to the Image() object.

Next, I am assigning the extracted image to the DIV using jQuery .prepend() method. You can use jQuery .append() too if you like. Both the methods will work in this example. The .prepend() method will insert the image (or any content) as the first index of each element. Where as the .append() will add an element as the last index.

Ref: Read more about jQuery .prepend() method.

Difference between jQuery .prepend() and .append() methods

This part is optional. I just want you to understand how methods .prepend() and .append() will work if implemented in the above example. You can see the effect of these two methods when you have more elements inside the DIV and you can decide which element to show first or last.

Consider this, and this is useful in this context too. I wish to add a text with the image. Using jQuery .prepend() and .append() methods, I can place them accordingly.

So now, let’s add the image after a text.

$('#divimg')
    .empty()
    .append(img)
    .prepend('Description of the Image');

Try it

Reverse the methods, and you will see the image followed by the text.

Once I have added the image to the DIV, I’ll now show the image animatedly using jQuery .animate() and .show() method. Here I have another DIV that serves as a container (the parent), and it has the DIV with the image. I have set the container’s display property as none to keep it hidden. Once the container is visible with image at the center of the screen, you can click anywhere on the container to animatedly hide it.

See this demo

← PreviousNext →

Add <img> to DIV and Zoom the Image at the Center Using jQuery

Difference between jQuery .prepend() and .append() methods