Question

我现在正在看fancybox v2。

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

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

谢谢，标记

Answer 1

确保所有新加载的图片在链接到它们的锚点中共享相同的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 +

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”替换为您正在使用的类。