jQuery

Google like image hover gallery using jquery


This week I was working with a client who wanted me to design a website for his new business. One of its features was to have an image gallery that pops to a larger view on hover. I found that this could be an interesting challenge for me if could make it happen dynamic, like a plugin style. So today here is my challenge and the solution to it.

The Challenge

Reduce the size of the images dynamically to half of its width and height which on hover pops out to its original size. Finally make this to work in a plugin style that can be applied to any set of images instantly.

Please note:
For this plugin to work all the images should be of the same size. In name this solution “Simple and Sleek image hover gallery”.

The HTML Structure

We just create a div inside which we add an un-ordered list of images inside. Remember to give the class name of the div as ‘image-popout’ for Jquery to do its magic.

<div class="image-popout">
       
            <ul>
                <li><img src="images/01.jpg" alt="Image 01" /></li>
                <li><img src="images/02.jpg" alt="Image 01" /></li>
                <li><img src="images/03.jpg" alt="Image 01" /></li>
                <li><img src="images/04.jpg" alt="Image 01" /></li>
                <li><img src="images/05.jpg" alt="Image 01" /></li>
            </ul>
           
</div>

Now refer the latest ‘Jquery’ pack and the ‘imagepopout.js’ inside the HTML document for it to do its magic. You can add this inside the head tag or just before ending the body tag.

<script src="js/jquery-1.4.2.min.js"></script>
<script src="js/imagepopout.js"></script>

The Jquery Magic

Let’s go over our ‘imagepopout.js’ to understand it better. In the first section we create two variables ‘xwidth’ and ‘xheight’. Then get the width and height of the image inside the div with class ‘image-popout’ and divide it by 2. Now apply these values ‘xwidth’ and ‘xheight’ respectively.

Now that we have the new variables (xwidth and xheight) loaded with values, let’s just apply it on the image again so that it reduces in size on page load. We do the same to its parent element, which in this case is the ‘li’ tag for better styling. We will come to styling part later.

        var xwidth = ($('.image-popout img').width())/2;
    var xheight = ($('.image-popout img').height())/2;
   
    $('.image-popout img').css(
            {'width': xwidth, 'height': xheight}
    ); //By default set the width and height of the image.
   
    $('.image-popout img').parent().css(
            {'width': xwidth, 'height': xheight}
    );

The Real Action

The hover function in jquery.com states that if you put a comma within the hover function but between the individual function then you can define both ‘Hover In’ and ‘Hover Out’

jquery.com
The .hover() method binds handlers for both mouseenter and mouseleave events. We can use it to simply apply behavior to an element during the time the mouse is within the element.
Example: $(selector).hover(handlerIn, handlerOut)

So we get the image inside the class ‘image-popout’ and on its hover write a function. It is required here to create a function so that it holds up many activities which we would like to do during hover.

First we animate the zoom out effect with the help of ‘animate()’ function from Jquery. Here in this function we get the actually size of the image by multiplying the width and height by 2 (Remember we divided it by 2 to shrink to its half size earlier? So now we multiply). You might wonder why there is a ‘margin’ property. This is used so that image pops out from its center and not its top right corner as it would normally do. Because the aim of this plugin is to do this dynamically we get the width of the image (which is ‘xwidth’ here) and divide it by 2 to get the centre point of the image. Now give a minus to this value and apply it on the margin property so that it zoom out from the middle of the image. Finally we add a class ‘image-popout-shadow’ to the image so that it gives a shadow feel on zooming out. This class has nothing but some css3 tricks which we will take a look in sometime.

$('.image-popout img').hover(
        function() {
            $(this).stop().animate( {
                width   : xwidth * 2,
                height  : xheight * 2,
                margin : -(xwidth/2)
                }, 200
            ); //END FUNCTION
           
            $(this).addClass('image-popout-shadow');
           
        }, //END HOVER IN
        function() {
            $(this).stop().animate( {
                width   : xwidth,
                height  : xheight,
                margin : 0
                }, 200, function() {
                    $(this).removeClass('image-popout-shadow');
        }); //END FUNCTION
           
        }
    );

Restoring the Action

Now we write the ‘Hover out’ function with just restoring all the values that we applied to the image earlier on ‘Hover in’. We also remove the shadow class as we don’t want that when on shrink state.

.stop()

The ‘stop()’ function is added before ‘animate()’ function so that if any animation was happening then we stop it and then animate again. This is a best practice when writing ‘animate()’ function so that it avoids looping of animation when you hover over images very fast.

200

The ‘200’ value that you see at the end of ‘animate()’ function is the speed at which the animation should happen. ‘1000’ equal to 1millisecond. So do the math for ‘200’.

The CSS

We use a little bit of style so that the gallery looks appealing. Also it helps hover effect happen proper. First we set the ‘position’ of the total div (image-popout) to ‘relative’. Then we set the ‘position’ of the images inside to ‘absolute’ in relative to its parent folder (image-popout). Give it a little bit of border and give some color to it.

.image-popout {
    position:relative;
    padding:10px;
}

.image-popout img {
    position:absolute;
    border:3px solid #f0f0f0;
    display:block;
}

.image-popout-shadow {
    -moz-box-shadow: 0 0 5px #333;
    -webkit-box-shadow: 0 0 5px #333;
    box-shadow: 0 0 5px #333;
    position:absolute;
    z-index:2;
}

.image-popout li{
    float:left;
    margin-right: 20px;
}

Now for the CSS3 magic. I love to call HTML and CSS as magic so please bear with me. So yeah back to the magic. We use the ‘box-shadow’ property and giving it some color. We also position them ‘absolute’ and give it a ‘z-index’ of about ‘2’ so it also overlaps the other images.

Finally we float the ‘li’ tag to left so that all the images align horizontal. Also give it a right margin of 20px to give some space between each image.

Browser Compatibility

It works on all browsers except Internet Explorer 6. Chrome and other webkit browsers like Safari render the size of the images only after the whole page is loaded. So it is advised to add the ‘imagepopout.js’ just before the closing of body tag. So that the whole page loads and then we the script gets loaded.

Full stop

With just a few lines of CSS and Jquery we get this wonderful and simple hover effect. I will also show you how to replicate the same effect even with images which are of different dimension (something like Google images) and later with extra meta information. So please stay tuned to my RSS and Twitter feeds. Please do let me know your comments below.

Latest Comments

Leave a Reply

comment on this article