WORKSHOP
owned by Ivan Lazarevic

Create image gallery in 4 lines of jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<div id="gallery">
	<div id="panel">
		<img id="largeImage" src="images/image_01_large.jpg" />
		<div id="description">First image description</div>
	</div>

	<div id="thumbs">
        <img src="images/image_01_thumb.jpg" alt="1st image description" />
        <img src="images/image_02_thumb.jpg" alt="2nd image description" />
        <img src="images/image_03_thumb.jpg" alt="3rd image description" />
        <img src="images/image_04_thumb.jpg" alt="4th image description" />
        <img src="images/image_05_thumb.jpg" alt="5th image description" />
	</div>
</div>

#thumbs { padding-top: 10px; overflow: hidden; }
#thumbs img, #largeImage {
 border: 1px solid gray;
 padding: 4px;
 background-color: white;
 cursor: pointer;
}
#thumbs img {
 float: left;
 margin-right: 6px;
}
#description {
 background: black;
 color: white;
 position: absolute;
 bottom: 0;
 padding: 10px 20px;
 width: 525px;
 margin: 5px;
}
#panel { position: relative; }

$('#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'));
});

Comments [ 81 Comments ]

1. Joshica
   July 6, 2010

   This is cool. Thanks man

   
2. Nick
   August 9, 2010

   THIS is the kind of stuff i like. Some image galleries out there that do almost the exact same thing are 10+ KB in size, WHEN THEY DON’T NEED TO BE. do more stuff like this, i love it.

   
3. Robin Thrift
   August 13, 2010

   Agree, this a neat little chunk of code. I can definitely build up on that!

   
4. Edward
   October 8, 2010

   Awesome, really clean!

   
5. akil
   December 4, 2010

   Hi I am not sure how to use this plus but I have download the wp plugin but unsure how to implement this to show on up on the front page.

   
6. jeip
   January 13, 2011

   Hi, I would like to open the thickbox by cklicking on the large image. how can I reach this?

   
7. Big Steve
   February 20, 2011

   Very nice. I’m just learning jQuery and JS and this not only teaches me a lot, its just what I need for my first site.
   Thanks!!!

   
8. Bjorn
   March 18, 2011

   Love it! Simply love it! Easy to implement and use! You are a Jquery god =)

   
9. Sally
   March 20, 2011

   Hi, I have implemented this on my site, but when I click on the thumbnails they don’t change the large image. Am I missing something?

   I am using BigCommerce and wondering if I put the jquery in the wrong spot.

   Many thanks!

   -Sally

   
10. Brian
    April 5, 2011

    Sally, I had a similar problem, I wasn’t escaping the dollar signs in the script section on my perl website. I recommend making an html page of this that works and then view the source on the non working one and the working html one and compare the two. You can see then where stuff is not being escaped properly(or other problems). Anyway thanks for this, looks and works great!

    
11. StuartDesign
    April 11, 2011

    This is great! Nice work!

    
12. Naveed
    May 6, 2011

    How to show a spinner/loading GIF image while the image loads? This gives a feedback to the users that something is happening.

    
13. Lazarevic Ivan
    May 9, 2011

    You can try to add loading gif as background of #panel

    
14. Alysa Lobalbo
    May 12, 2011

    Thanks for showing me, a “beginner”, there is much more in it! Keep making things easy and captivating and there will certainly be many many more people just like me knocking on this door.

    
15. aditia
    May 23, 2011

    thanks man, that really easy to follow

    
16. Mike
    June 3, 2011

    Hi,
    Great work. Is there a way to eliminate description/captions from appearing over the sliding images?
    Thanks.

    
17. Catalin
    July 8, 2011

    Thank you! Very useful!

    
18. Marge d'Wylde
    July 23, 2011

    Hi – Is there a way to put a link into the code so that when you click on each large image it can go to another page on the site?

    This will help me with a site that needs to be useful for dialup users.

    Warm regards,
    Marge d’Wylde

    
19. Andrew B.
    August 22, 2011

    <a href="" rel="nofollow">
    
    </a>
    

    within the html place the image in the like above.

    var link = $(this).attr('data-id');
    $(".targetLink").attr('href',link);
    

    within the gallery jquery add these two lines under the forth line.It should look like this:

    $(document).ready(function(){
    $('#thumbs img').click(function(){
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
    $('#description').html($(this).attr('alt'));
    var link = $(this).attr('data-id');
    $(".targetLink").attr('href',link);
    });
    });
    

    the first 4 lines are the ones provided above and the last 2 are the ones that you add

    
20. Adonice Web Design Group
    October 6, 2011

    it’s so nice ! thank you