Question

I have a simple jquery image gallery. When a user clicks on thumb it will replace ‘thumb’ to ‘large’ in src attribute of the main Image, I use delegate method of jQuery to dynamically load thumbs and use them without bind event listeners for new thumbs. jsfiddle

Now i need to be able to link to a specific image in the gallery, For example, example.com/gallery.php#3rdimage so the user will immediately see the 3rd image in the gallery, something like the method that engadget is using http://www.engadget.com/photos/samsung-series-5-chrome-os-laptop-vs-11-inch-macbook-air-fight/#4128000

Answer 1

Simply grab the page’s hash value and use it as an index against the set of thumbs:

wlh = window.location.hash[1];
if (!isNaN(wlh)) {
    $('#largeImage').attr('src', $('#thumbs img').eq(wlh-1).attr('src').replace('thumb', 'large'));
}

Demo: jsfiddle.net/EbCKN/show/#3 (will initially show the 3rd image)

To add a hash to the URL while browsing images so the URL is primed for sharing a certain image, it’s just an extra line after changing the #largeImage:

window.location.hash = $('#thumbs img').index(this)+1;

Demo: jsfiddle.net/EbCKN/1/show/ (edit)