Fancybox.. One Image That Contains More Images

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.

Solution 1:

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

HTML:

<!-- this is the regular image --><aclass="fancybox"href="leIMG-bigger-0.jpg"rel="leGallery"><imgsrc="leIMG-0.jpg"alt=""></a><!-- this is the rest of the gallery... hidden --><divclass="fancyboxHidden"><aclass="fancybox"href="otherIMG-bigger-1.jpg"rel="leGallery"><imgsrc="otherIMG-1.jpg"alt=""></a><aclass="fancybox"href="otherIMG-bigger-2.jpg"rel="leGallery"><imgsrc="otherIMG-2.jpg"alt=""></a><aclass="fancybox"href="otherIMG-bigger-3.jpg"rel="leGallery"><imgsrc="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 ;)