jQuery: handling an image gallery with pagination

by erick

HTML

<div id="gallery">
  <div id="gallery-wrapper">
    <a href="#">
        <img src="https://lh3.googleusercontent.com/-I_jvkhAtzlM/Tk6TfaPnypI/AAAAAAAAAqw/ddMw0tBE42c/s600/typography-2.jpg" alt="" />
    </a>
    <a href="#">
        <img src="https://lh4.googleusercontent.com/-95kVEwdg_ic/T1MrarK-hJI/AAAAAAAAA3o/PsiOduD0eKg/s425/disappointment.jpg" alt="" />
    </a>
    <a href="#">
        <img src="https://lh3.googleusercontent.com/-ISQjG6q7XwQ/T1MrgdZa1ZI/AAAAAAAAA3o/iaNG5xtS0mo/s428/help-frustration.jpg" alt="" />
    </a>
    <a href="#">
        <img src="https://lh5.googleusercontent.com/-oAhHdVnnyg4/T1MrcEW9ByI/AAAAAAAAA3o/-zTma1DolLk/s425/fonts-web-fonts-typography.jpg" alt="" />
    </a>
    <a href="#">
        <img src="https://lh3.googleusercontent.com/-MP6drmKHpmc/T1Mrj1mAsDI/AAAAAAAAA3o/nqv3fXcyOCw/s387/mac.jpg" alt="" />
    </a>
    <a href="#">
        <img src="https://lh3.googleusercontent.com/-dBlww3_uc0c/T1tEOigFdMI/AAAAAAAAA8A/8UgXM2_XCEk/s500/writer.jpg" alt="" />
    </a>
</div>
<div id="gallery-image"></div>
</div>

CSS

#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;
}

JavaScript

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]();

            }

        }

    }

};