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

Question

我现在只是在看 fancybox v2。

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

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

谢谢，标记

Answer 1

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

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

如果您愿意，这些 html anchor 可以位于隐藏的 div 内。您可以check this post供引用。

然后，将它们绑定(bind)到 fancybox

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

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

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

如果 anchor 可见，单击其中任何一个都将启动图库。

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

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

并添加此脚本:

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

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