Fancybox - How to open specific image in a gallery using fancybox via manual call

Question

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

This answers the question of opening the gallery manually.

However, what if I want to open a specific image in a gallery? It could be any image in the gallery list. Is there a way to do that?

I have tried this

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

where I add an additional class "default" for the image I want to show.

but when I run it, it shows that image but doesn't have next/prev button for gallery.

Answer 1

You have to simulate a click on the element you want to focus.

JQuery lets you do this with the .click function (link).

I took the example an let it focus on element of the group. The first method uses the same selector, fancybox used to create the group

<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>

Alternitvly you can assign an ID to the element you want to focus and simulate a click on it

<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 assigned to the thrid a element

and then select the element directly:

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

BR, Stefan

Answer 2

$("#ID").click(function () { $("a[rel=gallerimages]").fancybox({ }).trigger('click'); });