Fancybox - 如何使用fancybox通过手动调用在图库中打开特定图像

时间:2012-09-13 07:44:25

标签: jquery fancybox

How do I open fancybox via manual call for a gallery in the html not via the jquery options?

这回答了手动打开图库的问题。

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

我试过这个

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

我为要显示的图像添加了另一个类“default”。

但是当我运行它时,它会显示该图像,但没有图库的下一个/上一个按钮。

2 个答案:

答案 0 :(得分: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赋予thrid一个元素

然后直接选择元素:

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

BR, 斯蒂芬

答案 1 :(得分:0)

$(“#ID”)。click(function(){                 $( “一个[相对= gallerimages]”)。的fancybox({                 })触发( '点击');             });