Scroll to top
Recently I was asked to code a really simple photo gallery with jQuery, so I thought I’d post it for all to use. Its really simple and is the first time I’ve built a gallery with jQuery. It works by taking the link to the large image from the rel tag that we set in our html code. we then replace the contents of the div with the id of #image. The hide() and fadeIn() functions are optional. Check out the demo below and as usual you can download the complete code!
$(function() {
$(".image").click(function() {
var image = $(this).attr("rel");
$('#image').hide();
$('#image').fadeIn('slow');
$('#image').html('<img src="' + image + '"/>');
return false;
});
});
Below is the HTML. note that we use the rel attribute which holds the link to the full sized image. We take that attribute and get the value using JavaScript.
<div id="image"><img src="images/1.png" border="0"/></div> <a href="#" rel="images/1.png" class="image"><img src="images/t1.png" class="thumb" border="0"/></a> <a href="#" rel="images/2.png" class="image"><img src="images/t2.png" class="thumb" border="0"/></a> <a href="#" rel="images/3.png" class="image"><img src="images/t3.png" class="thumb" border="0"/></a>
Awesome tutorial!
I was wondering about implementing lightbox with this tutorial, i tried it with Colorbox http://colorpowered.com/colorbox/ , the result is not working because the lightbox doesn’t appear while the tag is correct.
Div of gallery
—————————————————————————————–
—————————————————————————————–
————-Script———————-
$(function() {
$(“.imagechanger”).click(function() {
var image = $(this).attr(“rel”);
$(‘#imageset’).hide();
$(‘#imageset’).fadeIn(‘slow’);
$(‘#imageset’).html(‘‘);
return false;
});
});
——————————————–
Any help would be much appreciated!
Mark says: I really liked thats this is a basic thumbnail gallery, the only fallback is it doesnt work when javascript is disabled.
Scott says: tried @pablo’s code to stop it jumping back to the top of the page and couldn’t quite get it to work so after a few tweaks i managed to get the following code to work :]
$(function() {
$(“.image”).click(function() {
var image = $(this).attr(“rel”);
$(‘#image .current img’)
$(‘#image’).fadeIn(‘slow’);
$(‘#image’).html(”);
return false;
});
});
thought i better share as a few people have been asking!
Roger Walters says: Thank you so much for this code, so simple and does exactly what it says!
However, if anyone knows how to stop it from jumping to the top of its parent div, it would be greatly appreciated 
Pablo says: It is a very good work, Thank you very much,
But if the gallery is not at the top of the page, if you click on an image the browser scroll moves up.
I have solved the problem with this code:
$(function() {
$(“#gallery .image”).click(function() {
var image = $(this).attr(“rel”);
$(‘#gallery .current img’).attr(‘src’,image).hide().fadeIn(‘slow’);
return false;
});
});
RE: Hey Ashley,
This gallery is simply genius. I have one quick question about it, though. Since you’re using to anchor the thumbnail links, I notice that it jumps back to the top of the page every time I click on one of the thumbnails, is there anyway around this? Thanks!
-Ryan
I am having the same issue as ryan, any way to fix the jumping anchorlinks???
Hi… Love this, it’s grand. I’d echo the question mentioned above… how difficult would it be to have multiple galleries on one page (I’m doing a small ecommerce site where this’d be very useful).
Greg says: Great job!! Amazing, very simple and easy to install.
Only have just question:
How can i make work transition effect between big images?
thank you again for this perfect job
Thank you very much for this, a fantastic and simple gallery which I installed in seconds. So many posers online trying to over complicate things and yet not bother to explain it properly, nice to see a true pro at work .
@RobbyDesign that’s probably the best comment I’ve ever had! thanks for the Kudos.
Ashley
selimoff says: Great Gallery, short code, and easy to inplement!
2 things:
1) //
2) How can I add a navigation to the gallery?
thanks Ashley
Muhon says: @ Matt, Could you please provide the html with caption? I would be very glad.
Pingback: Portfolio Simple Image Gallery
Great Gallery,
Ive been after something simple and easy to implement! Great Work.
Note: I also wanted to add in a caption to display under the image so if you wanted to do this just change your script like shown (Ive commented the changes)
$(function() {
$(“.image”).click(function() {
var image = $(this).attr(“rel”);
var title = $(this).attr(“title”); // Extra line to create the varible for the title
$(‘#image-gallery’).hide();
$(‘#image-gallery’).fadeIn(‘slow’);
$(‘#image-gallery’).html(” + title + ”); // Edited the line so that the p tags with the class gal-title
return false;
});
});
Then just add the title attribute to your href tags in your html.
Easy.
Awesome gallery, 5 star for the author.
I also would like to share:
Easy Gallery
http://www.freelancer-id.com/easy-gallery/
Thanks
Thank you for making a quick and easy web gallery! After trying some others this did exactly what I wanted it to do.
RW says: This is great! Just one question: I have a navigation bar on my page that stops working (the links aren’t clickable and none of the hover formatting etc appears). Any way around this?
–RW
Ryan says: Hey Ashley,
This gallery is simply genius. I have one quick question about it, though. Since you’re using to anchor the thumbnail links, I notice that it jumps back to the top of the page every time I click on one of the thumbnails, is there anyway around this? Thanks!
-Ryan
Love it!
If I want to have each large image link to a unique website. Can this be done with this code?
Thanks for sharing.
Gary says: Gracias, me fue de mucha utilidad!
Iarrieta says: Forget it, was a simple distraction with .JPG and .jpg
Sorry
Iarrieta says: Hi
Very nice your script but I have a little problem I don’t understand. I use your code and in local server works but in online server don’t
It’s very rare. What may be wrong?
Steve says: Great gallery, it was easy to use and looks very slick. I was curious how to alter the code in order to have more than one gallery on the page? I’m assuming it’s a matter of editing the short script and changing the id’s for the second gallery to something like “image2″, but my attempts have been unsuccessful. Thanks
Alfred says: Ashley… I put a flash video inside … and it works fine… now is a -basic- multimedia gallery too =D
= ] Thanks again!
Alfred says: Perhaps a preload images will be necessary?… Because until you’ve picked a thumb, the transition effect between big images don’t show… The first time is “estatic”
Simple, efective, easy and great!… Thanks!!… Just that i need!!
Jose luis Rivero says: Very nice website
Nathaniel says: What happened to the description? I saw it appear in the demo. But all of a sudden … no description. What happened? Can you bring it back or send me the files?
I love the simplicity of this gallery. Thanks for you help.
@Nathaniel your on the wrong post I wrote a new post with the title and description over here: http://papermashup.com/jquery-gallery-update-with-title-and-description/
@ashley. Thanks, its ok for now. But how about if I want to include a description or even a title to the photos?
Pingback: Simple jQuery Gallery – Un sencilla galerÃa de imágenes - CSS | pixelco.us blog
Pingback: jQuery gallery update with title and description | Papermashup.com
Cool, if you guys wanted to know step by step try out this
http://eyoosuf.blogspot.com/2009/02/simple-gallery-with-jquery.html
do you have a working demo? its only a screenshot that I can see when I click your DEMO button.
@jake here’s the link http://papermashup.com/demos/jquery-gallery/ click the thumbnails under the image to switch the image. You may have been confused by the fact that I’m using screenshots of other sites in the gallery. Let me know if you have any probs
Designer and web developer, Co-founder and Technical Director at Harkable.com London. Previously I worked at InMobi, Spotify and MySpace. Interests include photography and making short videos. Also an avid F1 fan.
Follow us on Twitter and get in-stream updates.
Subscribe to all the Papermashup tutorials and articles straight to your RSS reader.
Sign up and get all the Papermashup tutorials straight to your inbox.
41 discussions around Simple jQuery Gallery