Grow your CSS skills. Land your dream job.

Jquery popup gallery (Click image to open gallery with other images)

  • # December 15, 2012 at 5:56 pm

    Hello everyone!

    I am looking for a free jquery plug-in that will allow me to have different thumbnails on a page each representing a category in the gallery, so that when a user clicks on one of the images a pop-up windows appears with the main photo and mini thumbnails of more photos that are in that category.

    I have found a lot that after clicking one image give you mini thumbnails of the next ones coming, but are the same ones as the images visible on the web page- which is what I don’t want.

    Anyone know about a plugin like that? I’d be grateful for any help.

    Thanks
    Aleksander

    # December 15, 2012 at 9:46 pm

    So, I’m just trying to understand this fully. Basically, are you looking for a way have a bunch of thumbnails, and clicking on each of them would bring up some type of modal box or something with an entire gallery in it, with a kind of slider gallery in it?

    # December 16, 2012 at 7:09 am

    @kevin11189,

    Yes that’s what I’m looking for. Sorry for the bad explanation.

    # December 16, 2012 at 9:52 am

    Oh, you’re fine. I was just trying to make sure I understood what you were saying. I’ve been using fancybox a bit for stuff like that. There is a built in way to have a thumbnail gallery of that photo and all the other photos you set up to have it on that page.

    If you’re looking for it to have an entirely new set of images, it also allows for it to display plain html in the box.

    The only issue I have with doing it that way is that you could end up with a lot of images and a very heavy page load.

    There are a couple ways to do this.
    Using fancybox, you can also load an iframe which you could set up for each gallery that you’re looking for and everything would load on demand.
    Or… you could write a script to have all the images load on demand.

    Am I helping? lol.

    [Fancybox Page with instructions](http://fancyapps.com/fancybox/ “fancybox”)

    # December 16, 2012 at 3:31 pm

    Yeah sure, I appreciate your help.

    The thing is how can I get something like Fancybox to work in the way I want?
    So I would have the different thumbnails and different galleries opening after clicking them.

    # December 16, 2012 at 3:33 pm

    A bit like this http://jsfiddle.net/uZCC6/ …but with small thumbnails inside the open fancybox instead of just the left/right arrows.

    # December 16, 2012 at 4:46 pm

    Alright, it took me a while to get it to work in jsfiddle, but here it is.
    http://jsfiddle.net/kevin11189/uZCC6/1269/
    Alright, you set the “data-fancybox-group” to group the different galleries together. You can see how it works. I have thumb1 and thumb2.
    When it comes to the class, make sure the are “fancy-thumbs” and add the “hidden” class for each on that you don’t want to see, leaving one to start the gallery.
    Also, the JS is a bit different and I had to load another js and css in for the thumbnails.
    See how it works?
    Any questions?

    # December 16, 2012 at 5:41 pm

    That is awesome!
    Thanks man, I just need to figure out how to get the close button back.

    Thanks for your help I really appreciate it.

    # December 16, 2012 at 5:48 pm

    Hey, not a problem. Happy to help.
    Here is the new on with the close button.

    http://jsfiddle.net/kevin11189/uZCC6/1270/

    # December 16, 2012 at 5:52 pm

    Here is a list of all the api’s.
    http://fancybox.net/api
    Add them to the js like the other ones in there and you can manipulate a lot of it.

    # December 16, 2012 at 5:52 pm

    Oh now its just perfect, Thanks!

    # December 16, 2012 at 5:53 pm

    That can get useful, cheers.

    # December 21, 2012 at 10:46 am

    Hey I got one more question.
    Is there a way to make a link from a different page, and it would lead to my gallery page with a particular fancybox category already open?

    So it would be kinda linked to one of the _data-fancybox-group_ …?

    # March 9, 2013 at 3:45 am

    i want to change the link so that my image folder that i have will be integrated.let me know how this will work

    qim
    # May 4, 2013 at 6:33 pm

    Hi Kevin1189

    If you’re still around I wonder if you could help me develop your code a bit further. What I want is to bring up a set of photos gallery?) when you press on one and then be able to enlarge then as you did before. is that too comlicated? I’m a zero with java!

Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".