Simple jQuery Gallery
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>
Create a simple gallery with jQuery…
This is a simple introduction for beginners into how to use jQuery to create a simple image gallery using the basics of jQuery.
…
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
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!
[...] Simple jQuery Gallery 5 Comments [...]
[...] Web: papermashup.com/simple-jquery-gallery [...]
@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.
@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/
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!!
@Alfred, good suggestion. I’ll look to update the post when i get some time
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
@Iarrieta, no problem glad to hear you got it sorted
Leave a comment...
Connect
Latest Poll
Recent Posts
Design & Dev Jobs
Full-time and freelance job opportunities available at Authentic Jobs:
Post a job and reach web professionals everywhere.