Create image gallery in 4 lines of jQuery

Few days ago friend asked me to build image gallery with thumbnails for her web page. Request was pretty simple, she wanted large image and few thumbnails bellow that. Also, large image should have bar with description. When user click on thumb large image and description should change.

gallery-4-lines

My idea was to use alt tag of thumb image for large image description. I already did that for jqFancyTransitions. Also, I was impatient to use jQuery’s delegate method in real life. So this is my image gallery with thumbs and description in 4 lines of jQuery.

First prepare images for gallery, large images and thumbs. We need some naming convention so let’s naming large images with suffix _large and their thumbs with suffix _thumbs. For every image we will have pair, image_xx_large.jpg and image_xx_thumb.jpg. In this example all large images will be 565x280px and thumbs will be 100x100px.

Next thing is to include jQuery in head of your document:

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

After that we need layout to hold one large image and all thumbs. We need one panel with large image and description bar. Also, we need holder for thumbnails.

<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>

We should add some style to our gallery:

#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; 
}

Now, when we have layout and CSS prepared we should add functionality to our image gallery. When user click on thumb, large image should be changed as well as description. We will replace ‘thumb’ to ‘large’ in src attribute of largeImage and use alt attribute of thumb for description. That can be achieved with following jQuery code:

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

And that’s it, you have fully functional image gallery for your site.

The better way for this is to use delegate method of jQuery. With delegate you’ll be able to dynamically load thumbs and use them without bind event listeners for new thumbs.

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

Delegate method is added in jQuery 1.4.2. Check more about delegate().

  • Image gallery in 4 lines of code with MooTools and Dojo (8)
    Recently I wrote article how to create image gallery with description in 4 lines of jQuery code. Now, I will do the same thing with two other popular JavaScript frameworks, MooTools and […]
  • Bigshark – larger buttons on Grooveshark (1)
    GrooveShark is one of the web services which I’m using on daily basis. Actually, I have one computer which I use only to play music from my GrooveShark playlists, while I’m sitting on […]
  • Animated Progress Bar in 4 lines of jQuery (48)
    Progress bars are really useful to indicate to user that something happens and when it will be approximately done. They are useful on page where assets should be preloaded before page is […]
  • News Ticker in 4 lines of jQuery (92)
    There are a lot of different jQuery News Ticker plugins with lot of options that you can use. Do you want to learn how to create one on your own in only 4 lines of jQuery code […]
  • Coin Slider: Image Slider with Unique Effects (1620)
    After jqFancyTransitions I decided to release new jQuery image slider plugin with more unique transitions effects. I have ideas for new effects and after I didn't find that somebody […]

140 comments on "Create image gallery in 4 lines of jQuery"

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

Mike on June 3, 2011 at 9:08 am

thanks man, that really easy to follow

aditia on May 23, 2011 at 7:02 am

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.

Alysa Lobalbo on May 12, 2011 at 4:58 am

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

Naveed on May 6, 2011 at 5:44 am

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

Lazarevic Ivan on May 9, 2011 at 5:04 pm

This is great! Nice work!

StuartDesign on April 11, 2011 at 10:16 am

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!

Brian on April 5, 2011 at 6:19 pm

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

Sally on March 20, 2011 at 7:13 pm

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

Bjorn on March 18, 2011 at 1:29 am

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!!!

Big Steve on February 20, 2011 at 4:09 pm

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

jeip on January 13, 2011 at 5:16 am

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.

akil on December 4, 2010 at 5:36 pm

Awesome, really clean!

Edward on October 8, 2010 at 3:41 pm

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

Robin Thrift on August 13, 2010 at 5:07 am

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.

Nick on August 9, 2010 at 12:51 am

This is cool. Thanks man

Joshica on July 6, 2010 at 3:32 am

Leave a Reply

Your email address will not be published. Required fields are marked *