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

Question

我现在只是在看fancybox v2。

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

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

谢谢马克

Answer 1

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

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

如果需要，这些html锚点可以位于隐藏的div 。 您可以查看此帖子以供参考。

然后，将它们绑定到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 .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”。