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

[Al3ks]

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

[kevin11189]

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?

[Al3ks]

@kevin11189,

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

[kevin11189]

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

[Al3ks]

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.

[Al3ks]

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

[kevin11189]

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?

[Al3ks]

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.

[Al3ks]

Oh now its just perfect, Thanks!

[Al3ks]

That can get useful, cheers.

[Al3ks]

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

[webman]

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]

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!

[hjanssens]

Oh my goodness! Finally, I have found what I am looking for! This thread just saved my life! Thank you so much.

[deepunair]

Could someone please direct to a similar code that pops out videos when the thumbnail images are clicked?

[Author]

Posts