FancyBox 2.1.4 / jQuery - Can I use one Thumbnail to link to Photo Gallery?

Question

I'm using FancyBox 2.1.4 and jQuery,

Is it possible to have only one Thumbnail on an HTML Page that points to an entire FancyBox Photo Gallery that consists of more than one photo?

So when one click on that one Thumbnail it will launch a FancyBox Photo Gallery over the existing HTML Page that can be viewed.

By default one needs all the Thumbnails on the one HTML Page and if you then click any one it will open that one and you can click Left or Right to view the other photos.

My logic behind this: On the HTML Page there's info. about a place (a residential complex), and on that page I want to place only one Thumbnail and call it "Photo Gallery of the Complex", so when someone clicks on that one Thumbnail it launches the FancyBox Photo Gallery Slideshow with all the photos.

Thanks for any help,

Reinhard.

Marela

I found two answers to this on the FancyBox website (fancyapps.com/fancybox/#useful) under "Tips and Tricks" after sniffing around a bit more, Two methods of starting the gallery with only one preview picture: 1. Method one - Hide other images 2. Method two - Open fancyBox manually (but any other better or easier methods are also welcome) Thanks, Reinhard – Marela

If you are new to jQuery, then I don't think you will find methods easier than those but if you find easily your way around php or jQuery, then you could generate the (hidden) gallery dynamically in your html or pull the contents of the gallery via ajax, whatever works best for you. – Valoniah

Answer 1

I know I'm 2 months late to the party, but I had a similar situation that needed worked out and while the example on the FancyBox website is useful, it's a bit impractical to include all those links to images only to hide them (look out for a heavy page load!).

I did some tweaking and noticed that all that's really needed is the <a> tags with the rel attribute. I cleaned up the example, removing the js that adds the same rel attribute to everything, and adding another gallery to show how it could work: http://jsfiddle.net/uZCC6/3005/

Hope this helps anyone else!

Mitten