FancyBox gallery integration

喜欢而已 提交于 2019-11-27 08:26:21

问题


I have a question regarding the integration of FancyBox. I would create a gallery with 10 pictures but only one thumbnail. For example: http://fancyapps.com/fancybox/demo/ The first demonstration shows four images : forest, sea, sunset and Effeil tower. Can I include a single thumbnail, for example a thumbnail of the Eiffel Tower, which on clicked, would display the image of the Eiffel Tower in the lightbox, but also those of the forest, sea and sunset. I tried many things but nothing works properly. If you have any ideas... Many Thanks.

PS: I use the Twitter Bootstrap-1.3 & FancyBox-2


回答1:


You need a link to all the images in your gallery regardless they show a thumbnail or not so you may have this html

<a class="fancybox" rel="gallery" href="image01.jpg"><img src="thumbnail01.jpg" alt="" /></a>
<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>

etc. ... in that way, only a single thumbnail is shown and the rest of the links are not visible but functional.

Then a script like this will fire the gallery

$("a.fancybox").fancybox();



回答2:


You can simply add display:none to the links you don't want to show.

e.g. http://jsfiddle.net/MvvuE/



来源:https://stackoverflow.com/questions/9136888/fancybox-gallery-integration

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!