Click here to Skip to main content
Click here to Skip to main content

JavaScript / jQuery Photo Gallery

By , 27 Mar 2013
Rate this:
Please Sign up or sign in to vote.

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

point64
Software Developer
United States United States
Software Development

Comments and Discussions

 
QuestionCorrection: Missing double-quote on img largeimage Pinmemberpoint6430-Jan-13 10:37 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140421.2 | Last Updated 27 Mar 2013
Article Copyright 2013 by point64
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid