Display a specific gallery manually from a thumbnail click (fancybox)

Question

I am using a theme for Wordpress that fancybox is already included in. Everything works perfectly, smoothly and cleanly, as it should. Now there is something that I would like to do, and, unfortunately, I have no knowledge for this:

When I click on the first thumbnail of my published post, a fancybox slideshow appears and all thumbnails are displayed. Cool enough, but I would like this slideshow to display more than just these thumbnails. Perhaps something like 10 or 20 files locally.

I believe that there is a way to do this, I found this code snippet on another issue ( Fancy box - how to show slide shows from one thumbnail ), but I just couldn’t "Do not make it work, no matter how I try (I can more or less to "read" codes, but writing is not something that I can do!)

So yes, just like that, I would like my "post1" fancybox to display X images except thumbnails. And also, you can repeat this trick with X different posts, so I need to find a clean way to do this, and not just some kind of structure trick. I tried to include the above code in the html part of my post, but just didn't work.

Feel free to reply! And let me know if you need more information!

I find this to be an interesting part of my HTML post:

<div id="product-slider"> <div id="product-slides"> <div class="item-slide"> <a href="http://www.prepadem.fr/wp-content/uploads/2012/10/cheetah-picture1.jpg" rel="gallery" class="fancybox"> <img src="http://www.prepadem.fr/wp-content/uploads/et_temp/cheetah-picture1-43518_298x226.jpg" alt="" width =298 height=226 /> <span class="overlay"></span> </a> </div> <!-- .item-slide --> <div class="item-slide"> <a href="http://www.prepadem.fr/wp-content/uploads/2012/10/Angelique_thumb1.jpg" rel="gallery" class="fancybox"> <img src="http://www.prepadem.fr/wp-content/uploads/et_temp/Angelique_thumb1-724863_267x226.jpg" alt="" width =298 height=226 /> <span class="overlay"></span> </a> </div> <!-- .item-slide --> </div> <!-- #product-slides --> <div id="product-thumbs"> <a href="#" class="active" rel="1"> <img src="http://www.prepadem.fr/wp-content/uploads/et_temp/cheetah-picture1-43518_69x69.jpg" alt="" width =69 height=69 /> <span class="overlay"></span> </a> <a href="#" class="last" rel="2"> <img src="http://www.prepadem.fr/wp-content/uploads/et_temp/Angelique_thumb1-724863_69x69.jpg" alt="" width =69 height=69 /> <span class="overlay"></span> </a> </div> <!-- #product-thumbs --> </div> <!-- #product-slider --> 

Answer 1

After reading a few questions, external links, etc., I realized that this is a problem, and how I think it works: (Sorry if this sounds pretty simple, but I just explain it this way, I liked reading! : ON)

Since fancybox is already activated by my WP theme, I don’t need to call it in my HTML code in my post. When I check my source code for my post (with 1 thumbnail and no code added), I see that this code is generated:

 <div id="product-slider"> <div id="product-slides"> <div class="item-slide"> <a href="http://www.prepadem.fr/wp-content/uploads/2012/10/cheetah-picture1.jpg" rel="gallery" class="fancybox"> <img src="http://www.prepadem.fr/wp-content/uploads/et_temp/cheetah-picture1-43518_298x226.jpg" alt="" width =298 height=226 /> <span class="overlay"></span> </a> </div> <!-- .item-slide --> </div> <!-- #product-slides --> 

Therefore, my value for rel for a slide show is gallery. Now I just need to add as many files as I wish in my slide show message, with the following code:

 <a class="fancybox" rel="gallery" href="image02.jpg"></a> <a class="fancybox" rel="gallery" href="image03.jpg"></a> <a class="fancybox" rel="gallery" href="image04.jpg"></a> 

And that, I can add as many photos as I want, until none of them are displayed as thumbnails! In any case, thanks to Tony and Janis for their help, if this answer does not help anyone else, at least I'm glad that it works the way I wanted!