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.
This entry was posted in Downloads, Javascript, Tutorials, Web Tools, jQuery and tagged Gallery, images, Javascript, jQuery, Tutorials. Bookmark the permalink.<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>
do you have a working demo? its only a screenshot that I can see when I click your DEMO button.
Cool, if you guys wanted to know step by step try out this
http://eyoosuf.blogspot.com/2009/02/simple-gallery-with-jquery.html
WAW!
Just as i needed.
Thank a lot!
Pingback: jQuery gallery update with title and description | Papermashup.com
Pingback: Simple jQuery Gallery – Un sencilla galerÃa de imágenes - CSS | pixelco.us blog
@ashley. Thanks, its ok for now. But how about if I want to include a description or even a title to the photos?
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.
Very nice website
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!!
Ashley… I put a flash video inside … and it works fine… now is a -basic- multimedia gallery too =D
= ] Thanks again!
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
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?
Forget it, was a simple distraction with .JPG and .jpg
Sorry
Gracias, me fue de mucha utilidad!
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.
I’ve been looking for something nice and simple like this. Thanks for sharing
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
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
Thank you for making a quick and easy web gallery! After trying some others this did exactly what I wanted it to do.
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.
Follow us on Twitter and get in-stream messages
24 discussions around Simple jQuery Gallery