Easy way to improve your image gallery using jQuery

How do you decide which image to click while browsing some gallery? Most probably, you'll click on image that you find interesting. And you make that decision in a matter of seconds. If, however, images have some description attached, it could make your choice easier.

Let's say you are browsing a CSS gallery and you want to check out some new and beautiful website designs. And you are of course interested in some details - for example, which category design belongs to, what's the rating or whatsoever. This information could be rendered below thumbnail, but there are other, more attractive ways of displaying additional data.

A good example is Design Shack. Additional information is shown when you hover the thumbnail. In this article, we'll create a simplified version of Design Shack gallery. I will use a few of my paintings for this tutorial.

Our task is to display additional image information when user hovers the image. This information will be displayed in a transparent div just over the thumbnail. So, first we need to render images. The easiest way is to use unordered list.

<ul>
    <li>
        <a href="zemun.jpg">
            <img src="zemun_tn.jpg" alt="Sample image" />
        </a>
    </li>
    /* other images here */
</ul>

Here is the CSS code:

ul
{
    margin:0px;
    padding:0px;
}
li
{
    list-style-type:none;
    float:left;
    margin:15px;
    position:relative;
    padding:0px;
}
li img
{
    border:0px;
}
li a
{
    display:block;
}

Basically, we created a simple gallery with floating thumbnail images. Let's add some description to each image: <ul>
    <li>
        <a href="zemun.jpg">
            <img src="zemun_tn.jpg" alt="Sample image" />
            <div class="textPlaceholder">
                <div>Zemun<br />Rating 4.7/5</div>
            </div>
        </a>
    </li>
    /* other images here */
</ul>

Each list item will contain not only the thumbnail, but also a description. Now let's take a look at CSS.

.textPlaceholder
{
    /* position and size */
    position:absolute;
    width:100%; height:50px;
    top:70px; left:0px;
    /* margins and padding */
    margin:0px; padding:0px;
    /* fonts */
    font-family:Arial; font-size:10px;
    color:#ffffff;
    text-decoration:none;
    /* background */
    background-color:Black;
    opacity: .5;
    filter: alpha(opacity=50);
    /* other */
    display:none;
    cursor:pointer;
}
.textPlaceholder div
{
    padding: 10px;
}

There are a few important things here: First, we'll set an absolute position for our description container inside the list item which is positioned relatively. Second, we'll set the transparency using opacity and filter attributes. And last, we'll hide all descriptions. Now let's add some interactivity.

As always, jQuery will do that simply. It will show/hide a description each time someone hovers a thumbnail. $(document).ready(function(){
    $("a").mouseover(function(){
        $(this).find(".textPlaceholder").show();
    }).mouseout(function(){
        $(this).find(".textPlaceholder").hide();
    });
});

See it live

Conclusion

This tutorial presented a simple way to improve image galleries. I tested this in IE7, Firefox and Safari.You can build upon this example, expand it and add other effects, such as animation.