jquery - Fancybox:仅在页面中显示一些图像，但在图库中有更多图像

Question

这是我调用 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>

这是我的 6 张 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>

我想做的是:只在页面中显示这 6 张图片，但是当用户单击下一个图标(在 fancybox 内)时，其他图片会加载到图库中(因此，到达第五张图片不会重新启动，但会继续处理其他图像)。我无法在单击下一步时删除 display:none 来执行此操作，因为它们会包含很多图像。带有 display:none 的图像仍然在加载时加载。 你能给我提供如何以干净的方式做到这一点的例子吗？ :)

Answer 1

对于额外的图片，只需将它们的链接放在额外的隐藏 div 中喜欢:

<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>

注意里面的链接隐藏div 没有 缩略图 ( <img /> ) 所以你实际上并没有给你的页面加载增加任何开销....关于链接，如果你想在你的画廊中有更多的图片，你必须努力- 在此处或任何地方(例如在您的脚本中)对它们进行编码。