Optimize jQuery image gallery for production 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

&lt;div id="gallery"&gt;
    &lt;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"/&gt;

    &lt;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"/&gt;

    &lt;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"/&gt;

    &lt;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"/&gt;
&lt;/div&gt;

&lt;div id="area"&gt;test&lt;/div&gt;
&lt;div id="button-previous"&gt;prev&lt;/div&gt;
&lt;div id="button-next"&gt;next&lt;/div&gt;


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("&lt;img src='" + imgUrl + "' alt='description' /&gt;");
};


CSS

#button-previous {float:left;}
#button-next {float:right;}
img{border:1px solid #000}
img.active{border-color:red}
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;
}