0

这是我调用 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仍然在加载时加载。你能给我举例说明如何以干净的方式做到这一点吗？:)

4

1 回答 1

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 />)，因此您实际上并没有在页面加载中增加任何开销....关于链接，如果您想要画廊中的更多图像，则必须对它们进行硬编码例如，在这里或脚本内部的任何地方。

于 2013-06-08T17:14:42.187 回答