如何通过手动调用html中的库来打开fancybox，而不是通过jquery选项？

我现在正在看fancybox v2。

我试图让一个画廊加载fancybox但手动调用。 我不希望通过jquery加载图库图像最好从html页面加载它们，因为这将被添加到CMS的模板中，需要让用户将图像添加到库中填充他们上传的每个新图片。

是否只是在开始之前在选项中添加调用或在图像的a标签的href中添加调用一样简单？

谢谢，马克

Answer 1

确保所有新加载的图像在链接到它们的锚点内共享相同的class和rel属性

如果你愿意，那些html锚点可以在隐藏的div 。 您可以查看此post以供参考。

然后，将它们绑定到fancybox

 $(".fancybox").fancybox(); 

你说你将使用CMS，所以如果加载图像的href格式类似于http://path/to/image/?abc=123 （例如没有图像扩展名），请添加type:"image"选项你的脚本

 $(".fancybox").fancybox({ type:"image" }); 

如果锚点可见，单击其中任何一个将启动库。

另一方面，您可以使用任何其他链接“手动”启动图库

 open gallery 

并添加此脚本：

 $("#launcher").on("click", function(){ $(".fancybox").eq(0).trigger("click"); }); 

.eq()方法用于从第一个项目（可以是任何项目.eq()启动图库，否则图库将从最后一个附加项目开始。 此外， .on()方法需要jQuery .on() +

Answer 2

如果你想/必须使用旧的jQuery版本（例如，因为Drupal模块）摆脱.on()并使用

 < a href="javascript:;" id="launcher">LINK TO TOPEN GALLERY< /a> 

和

 jQuery(document).ready(function($) { $("#launcher").click(function() { $(".imagefield-fancybox").eq(0).trigger("click"); }); }); 

代替。

也适用于较旧的jQuery版本。 将“.imagefield-fancybox”替换为您正在使用的类。