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().

  • News Ticker in 4 lines of jQuery (93)
    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 […]
  • Use Webcam to Create Animated GIF (1)
    Some time ago I saw some online animated gif creator and thought it could be done in JS instead of Flash. We could easily access webcam from browser with the getUserMedia API. Nice […]
  • jQuery Snow Falling plugin (114)
    I like winter because of holidays and snow. Not big fan of going to shopping and buying New Year gifts and presents, but I am fan of snow and snowboarding. That's why I enjoy watching how […]
  • 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 […]
  • Twitter Flock for Wordpress: multiple accounts tweets with style (69)
    Twitter Flock is Wordpress plugin for showing multiple accounts tweets with different color scheme for every account. Also, there are setting allowing you to control how your tweets will […]

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

I want to do this with a background image. Unfortunately it generated the src but I think it is remaining behind the background image url property.

My attempt is to have several different backgrounds that the user can click on to see want they might look like when he puts his own text over it.

JeffreyScott on September 12, 2018 at 2:39 pm

How can I have 2 (multiple) gallery having different images on the same page, I tried Copy and past it 2 times with different images but it only works for the 1st gallery.
I dont know how to do it for multiple gallery within same page using “rel” tag. I need help with js.
Please help me asap.
Thank you

Najmuddin Kapadia on October 2, 2015 at 4:04 pm

Really awesome and simple…

Cheers team

dhilip on September 25, 2015 at 8:54 am

Thank you:-)

sajchi on March 15, 2015 at 6:19 pm

this is an old article, but was wondering, if you’re still around, do you know how to make this exact thing but with videos instead?

Thanks!

Elli on February 6, 2015 at 9:37 pm

Its a really simple and cool solution. Thanks a lot Ivan.

Ravindra on September 20, 2014 at 6:31 am

Leave a Reply to Adam Cancel reply

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