Fancybox.. one image that contains more images

Question

I just want my page to contain one image then once you click it.. you can move across and view more images.. is this possible?

Atm my fancy box is just one image showing one image..

Any help would be great, thanks

Answer 1

I use to work with Fancybox since earlier versions. What I do in that case is:

HTML:

<!-- this is the regular image -->
<a class="fancybox" href="leIMG-bigger-0.jpg" rel="leGallery"><img src="leIMG-0.jpg" alt=""></a>

<!-- this is the rest of the gallery... hidden -->

<div class="fancyboxHidden">
     <a class="fancybox" href="otherIMG-bigger-1.jpg" rel="leGallery">
          <img src="otherIMG-1.jpg" alt="">
     </a>
     <a class="fancybox" href="otherIMG-bigger-2.jpg" rel="leGallery">
          <img src="otherIMG-2.jpg" alt="">
     </a>
     <a class="fancybox" href="otherIMG-bigger-3.jpg" rel="leGallery">
          <img src="otherIMG-3.jpg" alt="">
     </a>
<div>

CSS:

.fancyboxHidden {display:none;}

This way you are:

1) Using your full gallery (try the thumbs helper and will look great)

2) Indexing all the images for search engines

Hope this will help you, for a good example of this check out this site in source view.

PS: There is many ways to achieve what you want, you can create the gallery directly from JS or combine both ways. This is the way I choose for image indexing ;)