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>

这些是我在HTML中的6张图片

<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 />）内的链接，因此您实际上并未向您添加任何开销页面加载....并且关于链接，如果您想在图库中添加更多图像，则必须在此处或在脚本内部对其进行硬编码。

Fancybox：只是一些图像显示在页面中，但在图库中有更多

1 个答案: