Fancybox-如何通过手动调用使用fancybox打开画廊中的特定图像

Question

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

这回答了手动打开画廊的问题。

但是，如果我想在图库中打开特定图像怎么办？ 它可以是图库列表中的任何图像。 有没有办法做到这一点？

我已经试过了

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

在此处为要显示的图像添加一个附加类“默认”。

但是当我运行它时，它显示了该图像，但没有画廊的下一个/上一个按钮。

Answer 1

您必须模拟单击要聚焦的元素。

jQuery使您可以使用.click函数（ link ）来完成此操作。

我以这个例子为例，它专注于小组的要素。 第一种方法使用与创建组相同的选择器fancybox

<script>
    $(document).ready(function(){
        //get the group of your fancy elements
        var fancygroup = $("a[rel=example_group]");

        // get the element you want to focus (e.g the first element)
        var fancyelem = $(fancygroup.get(1));

        // simulate a click
        fancyelem.click();
    });
</script>

另外，您可以为要关注的元素分配一个ID，并模拟对其的点击

<p>
    Image gallery (ps, try using mouse scroll wheel)<br />

    <a rel="example_group" href="./example/9_b.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="./example/9_s.jpg" /></a>

    <a rel="example_group" href="./example/10_b.jpg" title=""><img alt="" src="./example/10_s.jpg" /></a>

    <a id="initthis" rel="example_group" href="./example/11_b.jpg" title=""><img alt="" src="./example/11_s.jpg" /></a>

    <a rel="example_group" href="./example/12_b.jpg" title=""><img class="last" alt="" src="./example/12_s.jpg" /></a>
</p>

（id分配给第三元素

然后直接选择元素：

<script>
    $(document).ready(function(){   
        $('#initthis').click();
    });
</script>

BR，斯蒂芬

Answer 2

$（“＃ID”）。click（function（）{$（“ a [rel = gallerimages]”）。fancybox（{}）。trigger（'click'）;}）;