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

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