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