Fancybox: just some images displayed in page but have more in the gallery

问题

This is my script that calls FancyBox:

<script type="text/javascript">
jQuery(document).ready(function() {
 jQuery(".fancybox").fancybox({
  helpers : { 
   title : { type : 'float' }
  },
      beforeShow: function(){
       this.title = '<div>'+jQuery(this.element).next('div').html()+'</div>';
      }
 });
});
</script>

And these are my 6 images in HTML

<div id="mydiv">
<a class="fancybox" data-fancybox-group="gallery" href="IMAGE_URL"><img id="thumb1" src="THUMB_URL" /></a><div style="display: none;">DESCRIPTION</div>
<a class="fancybox" data-fancybox-group="gallery" href="IMAGE_URL"><img id="thumb2" src="THUMB_URL" /></a><div style="display: none;">DESCRIPTION</div>
<a class="fancybox" data-fancybox-group="gallery" href="IMAGE_URL"><img id="thumb3" src="THUMB_URL" /></a><div style="display: none;">DESCRIPTION</div>
<a class="fancybox" data-fancybox-group="gallery" href="IMAGE_URL"><img id="thumb4" src="THUMB_URL" /></a><div style="display: none;">DESCRIPTION</div>
<a class="fancybox" data-fancybox-group="gallery" href="IMAGE_URL"><img id="thumb5" src="THUMB_URL" /></a><div style="display: none;">DESCRIPTION</div>
<a class="fancybox" data-fancybox-group="gallery" href="IMAGE_URL"><img id="thumb6" src="THUMB_URL" /></a><div style="display: none;">DESCRIPTION</div>
</div>

What I'd like to do is: have only these 6 images displayed in the page but when the user clicks on the next icon (within fancybox), other images are loaded in the gallery (so, arrived at fifth image it won't restart but go on with other images). I can't do this with display:none removed when clicking next, because they would be a lot of images. And images with display:none are still loaded at load time. Can you provide me examples of how to do this in a clean way? :)

回答1:

For your extra images, just place their links inside an extra hidden div like :

<div style="display: none;">
 <a class="fancybox" data-fancybox-group="gallery" href="IMAGE_URL"></a><div>DESCRIPTION</div>
 <a class="fancybox" data-fancybox-group="gallery" href="IMAGE_URL"></a><div>DESCRIPTION</div>
 <a class="fancybox" data-fancybox-group="gallery" href="IMAGE_URL"></a><div>DESCRIPTION</div>
 <a class="fancybox" data-fancybox-group="gallery" href="IMAGE_URL"></a><div>DESCRIPTION</div>
 ... etc
</div>

NOTICE that the links inside the hidden div HAVE NOT thumbnail images (<img />) so you are not actually adding any overhead to your page load .... and regarding the links, if you want more images in your gallery, you have to hard-code them here or anywhere like inside your script for instance.

来源：https://stackoverflow.com/questions/16999836/fancybox-just-some-images-displayed-in-page-but-have-more-in-the-gallery

标签

jquery

css

fancybox

fancybox-2