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 […]
  • Image gallery with fancy transitions effects (1013)
    I was looking all over the Internet for some jQuery gallery plugin with some interesting transition effects. I found a lot of great plugins but they all have pretty same transition […]
  • Bigshark – larger buttons on Grooveshark (0)
    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 […]
  • News Ticker in 4 lines of jQuery (90)
    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 od jQuery code […]
  • Animated Progress Bar in 4 lines of jQuery (42)
    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 […]

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

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

how can i add
next and previous button to above example

kiran on August 1, 2013 at 1:54 am

Are the thumbnails scrollable, if I exceed the number of thumbs shown in the pic? And is there a way to make it xml compatible to load the images?

lordrt on May 20, 2013 at 7:33 am

Excellent little script, ideal for the new galleries I am designing.

Will on March 23, 2013 at 5:42 pm

Awesome script, but we would love to know how to make it auto-play. Does anyone have any solutions on this?

Web Site Design Reference on March 5, 2013 at 10:00 am

it’s very simple and easy. thank you very much.

Raees khan on February 20, 2013 at 6:24 am

how to add slider

Diamond on February 7, 2013 at 5:18 am

Hello! (sorry for my English is very low) my Name is Williams, I need to know how to bin the others “large image” with some web site external,

Example: image_02_large.jpg” link to http://www.google.cl

stay tuned to your comments

Best regards!

Williams

Williams Lohse on January 28, 2013 at 5:08 pm

Great script. I have a question about expanding the jQuery capabilities. In addition to the “description” text, I need to create a link that is dependent upon the thumb as well.

My idea was to specify two other attributes to the thumb tag “atitle” and “btitle”. I tried a title attribute but do not want the tooltip popup. The “atitle” is the name of the text link and the “btitle” is the href of the corresponding link.

I tried embedding this link into the “alt” attributes above, but this did not function properly.

Assuming the link is in the same div as the description, how would I script the jQuery to grab the “atitle” text to modify/change/replace the link text and the “btitle” text to modify/change/replace the href of that link?

Thank you.

Xopher on January 9, 2013 at 12:51 am

A million thanks

Steve on January 8, 2013 at 8:55 pm

Off topic reply – @alexandru2882 – I believe the game is this one… http://en.wikipedia.org/wiki/Enslaved:_Odyssey_to_the_West

Brian on January 2, 2013 at 9:24 am

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>