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

我现在只是在看fancybox v2。

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

它像在调用之前在选项中添加调用或在图像的标签的href中那样简单吗？

谢谢，
标记

最佳答案

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

<a href="image01.jpg" class="fancybox" rel="gallery" ...

如果需要，这些html锚点可以位于隐藏的div中。您可以check this post供参考。

然后，将它们绑定到fancybox

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

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

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

如果锚点可见，则单击其中的任意一个将启动图库。

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

<a href="javascript:;" id="launcher">open gallery</a>

并添加以下脚本：

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

.eq()方法用于从第一个项目开始画廊（尽管可以），否则画廊将从最后一个附加项目开始。另外，.on()方法需要jQuery v1.7 +

关于jquery - 如何通过手动调用html中的图库而不通过jquery选项来打开fancybox？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10835849/