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.
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 565×280px and thumbs will be 100×100px.
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 [ 123 Comments ]
» Trackbacks and pingbacks click to expand
-
[...] Create image gallery in 4 lines of jQuery (演示 | 下载) [...]
-
[...] 12- Create image gallery in 4 lines of jQuery [...]
-
[...] Create image gallery in 4 lines of jQuery (演示 | 下载) [...]
Leave a Reply
More Articles
-
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.
My idea was to use alt tag of [...]
-
Image gallery in 4 lines of code with MooTools and Dojo
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 Dojo.
Task is the same. One large image, description bar, few thumbs bellow, large image and description should change when thumb is clicked. [...]
-
JUST – JavaScript Useful Stuff
I like experiment with data visualization on client side. For that purpose, of course, I need some data for development phase. Since that development phase means that something constantly change, I had to find a way to make my life easier. That’s why I wrote a group of JavaScript range functions which helps me to [...]
-
mooBarGraph: AJAX graph for MooTools
mooBarGraph is AJAX graph plugin for MooTools which support two types of graphs, simple bar and stacked bar graph. This plugin made graph from your JSON data and is compatible with all major browsers including IE6.
This is jqBarGraph on steroids. It have almost all jqBarGraph possibility, plus some new features, like url bars, info boxes, [...]
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 
June 2, 2012
This is an awesome script…nice and easy also. Thanks so much for sharing. Cheers!
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; }
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.
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
September 21, 2012
היי הידעתם? ריהוט משרדי הינו כולל דלפק קבלה וכסא מנהלים וכסא מנהלים
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.
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!
December 24, 2012
how can you slow or fadeIn/Out the largeImage
January 2, 2013
nice plugin ! but no auto play or navigation
January 2, 2013
@trần công nghiệp – You don’t consider clickable thumbnails to be navigation?
January 2, 2013
Off topic reply – @alexandru2882 – I believe the game is this one… http://en.wikipedia.org/wiki/Enslaved:_Odyssey_to_the_West
January 8, 2013
A million thanks
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.
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
February 7, 2013
how to add slider
February 20, 2013
it’s very simple and easy. thank you very much.
March 5, 2013
Awesome script, but we would love to know how to make it auto-play. Does anyone have any solutions on this?
March 23, 2013
Excellent little script, ideal for the new galleries I am designing.