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'）;}）;