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