OnClick thumbnails – load image

I have a simple image gallery of about 25-30 photos with a thumbnails strip What i want is to load only the image that i click the thumbnail for not to wait until all the 25-30 photos are loaded because it slows down my website. Any ideas how to do that?

Answer

First, put all 25-30 photos on the page in a way that won’t load them; the simplest way is to give them a CSS style of display:none. Then, put all your thumbnails on the page, and add jQuery logic like: $('.thumbnail').on('click', function() {.... The click handling function can then use jQuery’s show to show the full images as appropriate.

In other words, something like:

(HTML)

<img src="someImage.png" class="mainImage" id="image1" style="display:none"/>
<img src="someImage2.png" class="mainImage" id="image2" style="display:none"/>

<img src="someImageThumb.png" class="thumbnail" id="thumb1"/>
<img src="someImageThumb2.png" class="thumbnail" id="thumb2"/>

(JS)

$('.thumbnail').click(function(e) {
    var thumbId = $(e.target).attr('id');
    var index = thumbId.substr(5); // strip the "thumb" from "thumb1" to get "1"
    var imageId = "main" + index;
    $('#' + imageId).show();
});