Optimize jQuery image gallery for production

Question

I can't seem to find a very simple light weight image gallery, so I decided to build my own. I'm not an expert in jQuery/JavaScript, so I was hoping some suggestions could be made to make this production material. I have a working example on jsfiddle.

data-rel will end up being the full size image URL while img src will become the thumb url. I'd like to limit full size images from having to be all loaded at once on page render.

jsFiddle

<div id="gallery">
    <img data-rel="http://2.bp.blogspot.com/-MUcNEVzLIB8/TrStjvP92kI/AAAAAAAABLI/eK3vb1QMrrw/s1600/slide1-new.png" src="http://2.bp.blogspot.com/-MUcNEVzLIB8/TrStjvP92kI/AAAAAAAABLI/eK3vb1QMrrw/s1600/slide1-new.png" style="max-width:150px;max-height:50px"/>

    <img data-rel="http://1.bp.blogspot.com/-KDiH65CZ8Hs/TjO9rQbmt9I/AAAAAAAAAfg/HeVV38ckUzk/s1600/3.jpg" src="http://1.bp.blogspot.com/-KDiH65CZ8Hs/TjO9rQbmt9I/AAAAAAAAAfg/HeVV38ckUzk/s1600/3.jpg" style="max-width:150px;max-height:50px"/>

    <img data-rel="http://4.bp.blogspot.com/-pZuNX8uqQhw/TjO9rDvyC8I/AAAAAAAAAfY/N91storzGWc/s1600/2.jpg" src="http://4.bp.blogspot.com/-pZuNX8uqQhw/TjO9rDvyC8I/AAAAAAAAAfY/N91storzGWc/s1600/2.jpg" style="max-width:150px;max-height:50px"/>

    <img data-rel="http://4.bp.blogspot.com/-y1cPqvkIts8/TjPDKH1-XDI/AAAAAAAAAgA/l8JbwyqcQvI/s1600/hompimenu.jpg" src="http://4.bp.blogspot.com/-y1cPqvkIts8/TjPDKH1-XDI/AAAAAAAAAgA/l8JbwyqcQvI/s1600/hompimenu.jpg" style="max-width:150px;max-height:50px"/>
</div>

<div id="area">test</div>
<div id="button-previous">prev</div>
<div id="button-next">next</div>

JavaScript

$("#gallery img").first().load(function(){
    activeImg($(this));
});

$("#gallery img").on('click, mouseover', function(){
    activeImg($(this));
});

$('#button-next').click(function(){    
    var isLast = $('#gallery img.active').is(':last-child');

    if (isLast) {
        activeImg($('#gallery img').first());
    } else {
        activeImg($('#gallery img.active').next());            
    }          
});

$('#button-previous').click(function(){    
    var isFirst = $('#gallery img.active').is(':first-child');

    if (isFirst) {
        activeImg($('#gallery img').last());
    } else {
        activeImg($('#gallery img.active').prev());            
    }          
});

var activeImg = function($img) {
    $('.active').removeClass('active');

    var imgUrl = $img.addClass('active').data('rel');        
    $("#area").html("<img src='" + imgUrl + "' alt='description' />");
};

CSS

#button-previous {float:left;}
#button-next {float:right;}
img{border:1px solid #000}
img.active{border-color:red}

Answer 1

Why not make it a jQuery plugin?

A basic example to get you started:

(function ($, window, undefined) {

    $.fn.gallery = function() {

        var $nextButton = this.find('div.button-next'),
            $previousButton = this.find('div.button-previous'),
            $images = this.find('img');

        $images.on('click, mouseover', function(e){
            activeImage($(e.target));
        });

        $nextButton.on('click', function(){
            var activeIndex = $images.filter('.active').index(),
                nextIndex = (activeIndex + 1 !== $images.length) ? activeIndex+1 : 0,
                $nextImage = $images.eq(nextIndex);

            activeImage($nextImage);
        });

        function activeImage($img) {
            $images.removeClass('active');
            $img.addClass('active');
        };

        return this;
    };

})(jQuery, window);

$(function(){
    $('#gallery').gallery();
});

http://jsfiddle.net/4Lgtecx0/1/

I changed your id:s to classes in the code above so that you can have multiple galleries on the same page.

activeImage() will no longer pollute the global namespace.

Elements are cached instead of looked up over and over again (e.g. $('#gallery') vs this).

Keep in mind that the load event doesn't work on cached images in IE. On the other hand, you don't need to listen for the load event - just apply the class to the first element as in my fiddle.

Answer 2

It's quite fine, but it can be simplified a little bit. In the HTML, the img elements all have the same style value. It would be better to remove the style attribute from all the img, and define in the stylesheet instead:

#gallery img {
    max-width:150px;
    max-height:50px;
}