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



Comments [ 135 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.

    • Lazarevic Ivan
      May 9, 2011

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

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

  14. aditia
    May 23, 2011

    thanks man, that really easy to follow

  15. Mike
    June 3, 2011

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

  16. Catalin
    July 8, 2011

    Thank you! Very useful!

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

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

  19. Adonice Web Design Group
    October 6, 2011

    it’s so nice ! thank you

  20. chris reid
    October 13, 2011

    Good God man thank you for this simple morsel

  21. Manish
    November 3, 2011

    Great. Pretty simple and to-the-point coding. Thanks.

    By the way, can we add a navigation option just below the large image so that it can be used as a slider. Someone…?

  22. Renni
    November 21, 2011

    this code saved my night!

    thanks.

  23. chris d
    November 23, 2011

    Hello!

    Is there a way to have the image description to sit below the image?

    Great tutorial by the way…!

  24. Colchester Printers
    December 14, 2011

    Great tutorial but is there any way to have them sideways?

  25. Marlon
    December 19, 2011

    Awesome! Thanks for sharing!

  26. Rob
    December 27, 2011

    Now say I wanted to have two more thumbnails, but didn’t want to extend the width of the plugin. How could I scroll through through to the other thumbnails with this plugin?

  27. Anthony
    February 8, 2012

    I was trying this in wordpress and it doesn’t work well. I have a lightbox plugin that automatically has all the image open up separately. Any ideas?

  28. Tomzonk
    February 12, 2012

    How to make auto slide?

  29. Wellington A de Oliveira
    February 16, 2012

    I am trying to create on the same website a news scroll ticker pulling news from our db website and the same time including a slider that pulls pics from another website. Bottom line is that the news ticker uses jQuery 1.4.2 and the slider user jQuery 1.7.1 and they are conflicting, What should I do?

  30. Chris
    February 24, 2012

    This saved me a lot of hassle, thanks for the script!

    Cheers,
    Chris

  31. clark
    March 5, 2012

    Thanks for the script. Working beautifully.

    How would i go about adding a previous and next button to this code?

    I have modified the code because my image naming structure was different… my images are named 1, 2, 3.jpg, etc.. and my thumbs are named t1, t2, t3.jpg, etc.. so i altered my JS to this:

    $(‘#large_image’).attr(‘src’,$(this).attr(‘src’).replace(‘t’,”));

    Any help would be most welcome

  32. dcolumbus
    March 11, 2012

    Thanks for the simple code. How would you recommend automatically animating/progressing through the images?

  33. c_weild
    March 20, 2012

    super great! simple, easy, elegant. Thanks so much. Helped me out!! A little confusing (new to coding and html writing) but got there in the end :)

  34. Adam
    March 23, 2012

    Love this!
    Is there a way that I can run two slideshows on one page? I have a lot of slideshows that will need to play well together. Currently, when I try to use two, the second one will not work but the first one will. http://www.lakecommunicators.com/apex/test/publicrelations.php

    Thank You

  35. Akhilesh
    March 31, 2012

    I am trying to implement the above code in my HTML website . But i don’t know why its not functioning while showing the same layout as in the demo.

  36. Eyewebmaster
    April 24, 2012

    This is really simple and useful for us as web developers. Thanks for this image gallery.

    Rosendo from Eyewebmaster

  37. chris
    April 30, 2012

    Great easy solution. I was looking for this exact functionality. Thank you

  38. dani
    May 11, 2012

    when i make two of this gallery, the second not works. all pictures there. But no linked!
    Can anybody help

  39. harry
    May 11, 2012

    Is there a way to include a simple forward and back navigation? If so would it be a bother if I could gt it? :) completely awesome gallery, keep up the amazing work :D

  40. Shanna
    June 2, 2012

    This is an awesome script…nice and easy also. Thanks so much for sharing. Cheers!

  41. me
    June 26, 2012

    similar idea, with 1 line, and faster , with no need for jquery:

    function changeImg(t) {
    document.getElementById(“largeImage”).src = t.src.substr(1);
    }

    #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; }
    #panel { position: relative; }

  42. alexandru2882
    August 1, 2012

    Hi, sorry to be offtopic, but from which game are these immages from? Especially the first image. I would love to play this game.

  43. Josh
    September 18, 2012

    Hi,

    This is a great image gallery. I just have one question. Where do you insert all of the large images? I see the location for 1 large image and the thumbnails. I am still learning…

    Thanks
    Josh

  44. כסא מנהלים
    September 21, 2012

    היי הידעתם? ריהוט משרדי הינו כולל דלפק קבלה וכסא מנהלים וכסא מנהלים

  45. hansi
    October 1, 2012

    sir,

    This image gallery is good.but i have a problem.how can i use the java script code (inside the html code) in another .js file.because i use this html code inside the ckeditor.so the javscript code(inside the html tag) is not display.please help me…

    thank you.

  46. Jon
    December 16, 2012

    I was thinking of the same thing.. I put all of the JQuery code inside the script tag.

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

    });

    before closing the head tag. Let me know please! Thanks!

  47. Wayne
    December 24, 2012

    how can you slow or fadeIn/Out the largeImage

  48. trần công nghiệp
    January 2, 2013

    nice plugin ! but no auto play or navigation

  49. Brian
    January 2, 2013

    @trần công nghiệp – You don’t consider clickable thumbnails to be navigation?

  50. Brian
    January 2, 2013

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

  51. Steve
    January 8, 2013

    A million thanks

  52. Xopher
    January 9, 2013

    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.

  53. Williams Lohse
    January 28, 2013

    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

  54. Diamond
    February 7, 2013

    how to add slider

  55. Raees khan
    February 20, 2013

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

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

  57. Will
    March 23, 2013

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

  58. lordrt
    May 20, 2013

    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?

  59. kiran
    August 1, 2013

    how can i add
    next and previous button to above example

  60. india news blog
    October 17, 2013

    Howdy I am so grateful I found your website, I really found
    you by mistake, while I was searching on Google for something else, Anyways I am here now and would just like to
    say thanks a lot for a marvelous post and a all round enjoyable blog (I also love the theme/design), I don’t have time to read it all at the minute but I have saved it and also included your
    RSS feeds, so when I have time I will be back to
    read much more, Please do keep up the superb b.



» Trackbacks and pingbacks click to expand

  1. [...] bellow, large image and description should change when thumb is clicked. Same HTML and CSS code as here will be used. Dojo codesee how it worksMooTools codesee how it [...]

  2. [...] Canvas & jQuery( Demo | Download )Thumbnails Navigation Gallery with jQuery( Demo | Download )Create image gallery in 4 lines of jQuery( Demo | Download )WEB DEVELOPMENT( Demo | Download )jqGalViewII (Photo Gallery)( Demo | Download [...]

  3. [...] Create image gallery in 4 lines of jQuery (演示 | 下载) [...]

  4. [...] Create image gallery in 4 lines of jQuery (demo | download) [...]

  5. [...] Create image gallery in 4 lines of jQuery [...]

  6. [...] Create image gallery in 4 lines of jQuery (demo | download) [...]

  7. [...] Create image gallery in 4 lines of jQuery (演示 | 下载) [...]

  8. [...] Create image gallery in 4 lines of jQuery (演示 | 下载) [...]

  9. [...] Create image gallery in 4 lines of jQuery (演示 | 下载) [...]

  10. [...] Create image gallery in 4 lines of jQuery (演示 | 下载) [...]

  11. [...] Create image gallery in 4 lines of jQuery (演示 | 下载) [...]

  12. [...] Create image gallery in 4 lines of jQuery (演示 | 下载) [...]

  13. [...] Create image gallery in 4 lines of jQuery (演示 | 下载) [...]

  14. [...] Create image gallery in 4 lines of jQuery (演示 | 下载) [...]

  15. [...] Create image gallery in 4 lines of jQuery (演示 | 下载) [...]

  16. [...] Create image gallery in 4 lines of jQuery (演示 | 下载) [...]

  17. [...] 12. Create image gallery in 4 lines of jQuery [...]

  18. [...] Create image gallery in 4 lines of jQuery (演示 | 下载) [...]

  19. [...] Create image gallery in 4 lines of jQuery (演示 | 下载 ) [...]

  20. [...] Create image gallery in 4 lines of jQuery (演示 | 下载) [...]

  21. [...] Create image gallery in 4 lines of jQuery (演示 | 下载) [...]

  22. [...] Create image gallery in 4 lines of jQuery (演示 | 下载) [...]

  23. [...] Create image gallery in 4 lines of jQuery (演示 | 下载) [...]

  24. [...] Create image gallery in 4 lines of jQuery (演示 | 下载) [...]

  25. [...] Image Slider with Unique Effects (演示 | 下载) Create image gallery in 4 lines of jQuery (演示 | 下载) Slideshow with strip effects (演示 | 下载) [...]

  26. [...] Create image gallery in 4 lines of jQuery (演示 | 下载) [...]

  27. [...] Create image gallery in 4 lines of jQuery (演示 | 下载) [...]

  28. [...] Create image gallery in 4 lines of jQuery (演示 | 下载) [...]

  29. [...] 12. Create image gallery in 4 lines of jQuery [...]

  30. [...] Create image gallery in 4 lines of jQuery (demo | download) [...]

  31. [...] Image  Gallery in 4 lines of jQuery [...]

  32. [...] Create image gallery in 4 lines of jQuery (演示 | 下载) [...]

  33. [...] Create image gallery in 4 lines of jQuery (演示 | 下载) [...]

  34. [...] Create image gallery in 4 lines of jQuery (演示 | 下载) [...]

  35. [...] Create image gallery in 4 lines of jQuery (演示 | 下载) [...]

  36. [...] Create image gallery in 4 lines of jQuery (演示 | 下载) [...]

  37. [...] Create image gallery in 4 lines of jQuery (演示 | 下载) [...]

  38. [...] Create image gallery in 4 lines of jQuery (演示 | 下载) [...]

  39. [...] Create image gallery in 4 lines of jQuery (演示 | 下载) [...]

  40. [...] 7. Create image gallery in 4 lines of jQuery [...]

  41. [...] Create image gallery in 4 lines of jQuery (演示 | 下载) [...]

  42. [...] Create image gallery in 4 lines of jQuery (演示 | 下载) [...]

  43. [...] Create image gallery in 4 lines of jQuery(演示|下载) [...]

  44. [...] Create image gallery in 4 lines of jQuery (演示 | 下载) [...]

  45. [...] Create image gallery in 4 lines of jQuery (演示 | 下载) [...]

  46. [...] 12- Create image gallery in 4 lines of jQuery [...]

  47. [...] Create image gallery in 4 lines of jQuery (演示 | 下载) [...]

  48. [...] Image Gallery in 4 lines of jQuery [...]

  49. [...] Create image gallery in 4 lines of jQuery (演示 | 下载) [...]

  50. [...] Create image gallery in 4 lines of jQuery (演示 | 下载) [...]

  51. [...] Create image gallery in 4 lines of jQuery (演示 | 下载) [...]

  52. […] Create image gallery in 4 lines of jQuery […]

  53. […] Create image gallery in 4 lines of jQuery […]

  54. […] Create image gallery in 4 lines of jQuery (演示 | 下载) […]


Leave a Reply

More Articles


more on WORKSHOP.rs