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

这是我调用FancyBox的脚本：

 jQuery(document).ready(function() { jQuery(".fancybox").fancybox({ helpers : { title : { type : 'float' } }, beforeShow: function(){ this.title = '
'+jQuery(this.element).next('div').html()+'
'; } }); });  

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

 
 
DESCRIPTION
 
DESCRIPTION
 
DESCRIPTION
 
DESCRIPTION
 
DESCRIPTION
 
DESCRIPTION
  

我想做的是：只有这6个图像显示在页面中，但当用户点击下一个图标（在fancybox内）时，其他图像被加载到图库中（因此，到达第五个图像时它不会重启但继续其他图像）。 我不能用display:none来做到这一点display:none当点击下一个时display:none删除，因为它们会是很多图像。 带有display:none图像仍然在加载时加载。 你能提供一些如何以干净的方式做到这一点的例子吗？ 🙂

Answer 1

对于您的额外图像，只需将其链接放在一个额外的隐藏div如：

 
 
DESCRIPTION
 
DESCRIPTION
 
DESCRIPTION
 
DESCRIPTION
 ... etc  

注意隐藏div中的链接没有缩略图（ ），因此您实际上并没有为页面加载添加任何开销….而对于链接，如果您想在图库中添加更多图像，则需要例如，在这里或其他任何地方对它们进行硬编码。