Papermashup

Subscribe


Tweets


"Excited to be the 962nd pirate on @BackerKit for Piff The Magic Dragon Playing... | Thx @thepiff! https://t.co/jvq8FFw3e6"

@ashleyford 21 hours ago

"@KBedders @elerichardson I'm Free!!!!!! Call / Whatsapp me!!!"

@ashleyford 2 weeks ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Simple jQuery Gallery

AshleyAshley

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!

gallery


 $(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>

demodownload

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 49
  • online dog training
    Posted on

    online dog training online dog training

    Reply Author

    Hi there, its good post about media print, we all understand media is a
    wonderful source of data.


  • home decorate
    Posted on

    home decorate home decorate

    Reply Author

    Hi there i am kavin, its my first time to commenting anyplace, when i read this article i thought i could also make comment due
    to this good paragraph.


  • dennis
    Posted on

    dennis dennis

    Reply Author

    What a nice tutorial – i like things that are short – by looking at the few lines i suddenly realized that javascript and jquery is not so hard. Thanks. An eye opener :)


  • swapnil
    Posted on

    swapnil swapnil

    Reply Author

    cool bro…!!! thanks a lot…..


  • Richard
    Posted on

    Richard Richard

    Reply Author

    Just wondered if anyone had implemented a loading gif into the script to stop the jumps when images load?


  • Moddwe
    Posted on

    Moddwe Moddwe

    Reply Author

    Very easy and simple tutorial. Thanks ^_^


  • Andrea
    Posted on

    Andrea Andrea

    Reply Author

    Very nice and tidy.
    EXCEPT in example the ‘Back to Tutorial’ link is incorrect.
    Just thought you would like to know.

    TTFN…


  • Ivan
    Posted on

    Ivan Ivan

    Reply Author

    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!


  • gHants | Diseño gráfico – Web
    Posted on

    gHants | Diseño gráfico – Web gHants | Diseño gráfico – Web

    Reply Author

    Beautiful an d simple Gallery! Thanks..


  • Mark
    Posted on

    Mark Mark

    Reply Author

    I really liked thats this is a basic thumbnail gallery, the only fallback is it doesnt work when javascript is disabled.


  • Scott
    Posted on

    Scott Scott

    Reply Author

    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
    Posted on

    Roger Walters Roger Walters

    Reply Author

    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
    Posted on

    Pablo Pablo

    Reply Author

    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;
    });
    });


  • Jesse
    Posted on

    Jesse Jesse

    Reply Author

    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???


  • gtagamer
    Posted on

    gtagamer gtagamer

    Reply Author

    Can you make a translation on this? :)


  • Martin
    Posted on

    Martin Martin

    Reply Author

    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
    Posted on

    Greg Greg

    Reply Author

    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


  • RobbyDesigns
    Posted on

    RobbyDesigns RobbyDesigns

    Reply Author

    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 .


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @RobbyDesign that’s probably the best comment I’ve ever had! thanks for the Kudos.

      Ashley


  • selimoff
    Posted on

    selimoff selimoff

    Reply Author

    Great Gallery, short code, and easy to inplement!
    2 things:
    1) //

    2) How can I add a navigation to the gallery?

    thanks Ashley


  • Muhon
    Posted on

    Muhon Muhon

    Reply Author

    @ Matt, Could you please provide the html with caption? I would be very glad.


  • Matt
    Posted on

    Matt Matt

    Reply Author

    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.


    • marcee
      Posted on

      marcee marcee

      Reply Author

      This isn’t working for me at all.


  • Alaa Badran
    Posted on

    Alaa Badran Alaa Badran

    Reply Author

    Awesome gallery, 5 star for the author.

    I also would like to share:
    Easy Gallery
    http://www.freelancer-id.com/easy-gallery/

    Thanks :)


  • Andrew
    Posted on

    Andrew Andrew

    Reply Author

    Thank you for making a quick and easy web gallery! After trying some others this did exactly what I wanted it to do.


  • RW
    Posted on

    RW RW

    Reply Author

    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
    Posted on

    Ryan Ryan

    Reply Author

  • Visualisation
    Posted on

    Visualisation Visualisation

    Reply Author

    I’ve been looking for something nice and simple like this. Thanks for sharing


  • Jenn
    Posted on

    Jenn Jenn

    Reply Author

    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
    Posted on

    Gary Gary

    Reply Author

    Gracias, me fue de mucha utilidad!


  • Iarrieta
    Posted on

    Iarrieta Iarrieta

    Reply Author

    Forget it, was a simple distraction with .JPG and .jpg

    Sorry


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @Iarrieta, no problem glad to hear you got it sorted 😉


  • Iarrieta
    Posted on

    Iarrieta Iarrieta

    Reply Author

    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
    Posted on

    Steve Steve

    Reply Author

    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
    Posted on

    Alfred Alfred

    Reply Author

    Ashley… I put a flash video inside … and it works fine… now is a -basic- multimedia gallery too =D

    = ] Thanks again!


  • Alfred
    Posted on

    Alfred Alfred

    Reply Author

    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
      Posted on

      Ashley Ashley

      Reply Author

      @Alfred, good suggestion. I’ll look to update the post when i get some time


  • Jose luis Rivero
    Posted on

    Jose luis Rivero Jose luis Rivero

    Reply Author

    Very nice website


  • Nathaniel
    Posted on

    Nathaniel Nathaniel

    Reply Author

    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.


  • Jake
    Posted on

    Jake Jake

    Reply Author

    @ashley. Thanks, its ok for now. But how about if I want to include a description or even a title to the photos?


  • Evulgo Media
    Posted on

    Evulgo Media Evulgo Media

    Reply Author

    WAW!
    Just as i needed.
    Thank a lot!


  • Yoosuf
    Posted on

    Yoosuf Yoosuf

    Reply Author

    Cool, if you guys wanted to know step by step try out this

    http://eyoosuf.blogspot.com/2009/02/simple-gallery-with-jquery.html


  • Jake
    Posted on

    Jake Jake

    Reply Author

    do you have a working demo? its only a screenshot that I can see when I click your DEMO button.


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @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 :)