Question

im using the “CREATE IMAGE GALLERY IN 4 LINES OF JQUERY” (link below), which works just fine.

But i like to make the large images clickable (not just the thumbs), so that when i click on which ever image that is showing as the large image, another bigger version of the image opens in a new window.

http://workshop.rs/2010/07/create-image-gallery-in-4-lines-of-jquery/

Any ideas is greatly appreciated. Thank you.

Answer 1

You can wrap the large image in an anchor element:

<div id="panel">
    <a href="images/image_01_largest.jpg" target="_blank">
        <img id="largeImage" src="images/image_01_large.jpg" />
    </a>
    <div id="description">First image description</div>
</div>

This follows the convention that one image comes in three sizes: *_thumb.jpg, *_large.jpg, and *_largest.jpg. All you need to do now is change anchor’s href attribute when changing #largeImage’s src.

$('#thumbs img').click(function(){
    $('#largeImage').attr('src', $(this).attr('src').replace('thumb', 'large'));
    $('#largeImage').parent().attr('href', $(this).attr('src').replace('thumb', 'largest'));
    $('#description').html($(this).attr('alt'));
});