jQuery: paginating image galleries and handling navigation links

Images can be paginated with jQuery by simply creating a series of links with a single loop. The important thing to bear in mind is that each image is connected to its corresponding link via the inner index associated to it. So if an image has an index equal to 0, then its corresponding link will also have the same index. And so on. Let's see a practical example.

Markup

Here's our base markup structure:

<div id="gallery">
  <div id="gallery-wrapper">
    <a href="#">
        <img src="typography-2.jpg" alt="" />
    </a>
    <a href="#">
        <img src="disappointment.jpg" alt="" />
    </a>
    <a href="#">
        <img src="help-frustration.jpg" alt="" />
    </a>
    <a href="#">
        <img src="fonts-web-fonts-typography.jpg" alt="" />
    </a>
    <a href="#">
        <img src="mac.jpg" alt="" />
    </a>
    <a href="#">
        <img src="/writer.jpg" alt="" />
    </a>
  </div>
  <div id="gallery-image"></div>
</div>​

Our navigation items will be placed just before the main wrapper. As you can see, there's an inner empty element which will host the full-sized image.

CSS styles

Now we can create our CSS styles:

#gallery {
    width: 630px;
    margin: 2em auto;
}

#gallery-wrapper {
    height: 90px;
    width: 100%;
}

#gallery-wrapper a {
    float: left;
    width: 100px;
    height: 90px;
    margin-right: 5px;
}

#gallery-wrapper a img {
    display: block;
    width: 100%;
    height: 100%;
}


#gallery-nav {
    margin: 1em 0;
    text-align: center;
}

#gallery-nav a {
    display: inline-block;
    width: 2em;
    height: 2em;
    background: #ccc;
    border: 1px solid #999;
    color: #000;
    text-decoration: none;
    text-align: center;
    line-height: 2;
    margin-right: 0.5em;
}

#gallery-nav a.active {
    background: #999;
    color: #fff;
}


#gallery-image {
    margin: 1em 0;
    text-align: center;
}
​

The class active will be assigned to each link when a user hovers a navigation link with his mouse pointer.

jQuery code

With jQuery we can create a simple object that:

1. creates an empty image, inserts it in the gallery's placeholder and hides it
2. creates all the pagination links and assigns the class active to the first link
3. registers an hover event on each thumbnail which dynamically assigns the class active to the corresponding pagination link
4. associates a click event to the thumbnail links which makes the full-sized image appear.

$(link).removeAttr('href');

Here's the code:

var Gallery = {

    create: function() {
        $('<img/>').attr('id', 'image').appendTo('#gallery-image').
        hide();
    },

    paginate: function() {

        var images = $('img', '#gallery'),
            len = images.length;
        $('<div id="gallery-nav"/>').prependTo('#gallery');

        for (var i = 0; i < len; i++) {

            $('<a/>').attr({
                href: '#'
            }).text(i + 1).appendTo('#gallery-nav');

        }

        $('a:first', '#gallery-nav').addClass('active');

    },


    onhover: function() {

        $('img', '#gallery').each(function(i) {

            var $img = $(this);
            var $a = $('a', '#gallery-nav').eq(i);
            $img.hover(function() {

                if (!$a.hasClass('active')) {
                    $a.addClass('active').siblings().removeClass('active');
                }
            }, function() {

                $a.removeClass('active');
            });
        });

    },

    onclick: function() {
        $('a', '#gallery-wrapper').each(function() {
            var $a = $(this);
            var src = $('img', $a).attr('src');
            $a.click(function(e) {

                e.preventDefault();
                $('#image').hide();
                $('#image').attr('src', src);
                $('#image').fadeIn('slow');


            });
        });
    },



    init: function() {

        for (var i in this) {

            if (typeof this[i] === 'function' && this[i] !== arguments.callee) {

                this[i]();

            }

        }

    }

};

Gallery.init();

You can see the demo below.

Demo

Live demo