JavaScript / jQuery Photo Gallery

Using the code  

I'll keep this tip brief and I'll keep the code brief. Create your own photo gallery with 19 lines of code (8 jQuery, 11 HTML). First, include the latest jQuery library. Second, paste the code below into your HTML page.

To see the working demo: visit the space gallery. .

//
<script>
$('#thumbs img').click(function(){
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
    $('#description').html($(this).attr('alt'));
});
$('#thumbs').delegate('img','click', function(){
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
    $('#description').html($(this).attr('alt'));
});
</script>
<div id="gallery">
    <div id="panel">
    <div id="thumbs">
    <img src="http://point64.com/pagecontent/img/mars_thumb.jpg" alt="Mars" />
    </div>
    <BR><div id="description"></div><BR>
    <img id="largeImage" src="http://point64.com/pagecontent/img/mars_large.jpg />
    </div>
</div>
//  

That is all there is to it. Problems? Questions? View the source in the working demo: the space gallery.

History 

No history.