I am using a theme for WordPress that has fancybox already included in it. Everything works fine, smooth and clean, the way it’s supposed to.
Now there is something I’d like to do, and unfortunately I don’t have the knowledge for it:
When clicking on the 1st thumbnail of my publicated post, a fancybox slideshow appears and displays all the thumbnails. Cool enough, but I’d like this slideshow to display more than just those thumbnails.. Something like 10 or 20 files maybe, hosted locally.
I believe there’s a way to do this, I found this code fragment on another question ( Fancy box – how to show slideshow from a single thumbnail ) but just couldn’t make it work, no matter how hard I tried (I can more or less “read” codes, but writing it is not yet something I can do!)
So yeah, to put things simply, I’d like my “post1” fancybox to display X pictures, other than the thumbnails. And also, be able to repeat this trick with X different posts, so I need to find a clean way to do it, not just some structure trick. I tried to include the above code in the html part of my post, but just didn’t work.
Feel free to answer! And let me know if you need more info!
I believe this is the interesting part of my HTML’s 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 -->
After reading several questions, external links and more, this is how I figured out my issue, and how I believe it works: (Sorry if it sounds quite basic, but I’m just gonna explain it the way I would have liked to read it! Newbie language: ON)
Since fancybox is already activated by my WP theme, there is no need for me to call it in my HTML code on my post. When checking my source code on my post (with 1 thumbnail and no code added), I see this code generated:
Therefore my “rel” value for the slideshow is “gallery”. Now, I just need to add as many files as I wish in my post for the slideshow to display them, with the following code:
And that’s it, I can add as many pictures as I wish, whilst none of them are displayed as thumbnails! Anyway, thanks to Toni and Janis for their help, if this answer doesn’t help anyone else, at least I’m happy to have this working the way I wanted!