How to programatically enable zoom effect from clicked image on new Fancybox instance?

[twilson90]

I start my fancybox like so:

var fb = new Fancybox(
    [
        {src: "https://site.com/image1"},
        {src: "https://site.com/image2"},
        {src: "https://site.com/image3"}
    ], {
        startIndex: index,
    }
);

But I trigger it on clicking an image.
How do I make it do the cool scaling effect on opening from the image that was clicked? I can't find an answer anywhere in the documentation.

[fancyapps]

Hi,

Use $thumb attribute for the thumbnail images, something like this:

{src: "https://lipsum.app/id/36/1024x768", $thumb : document.querySelector('.imglist img')},

[SamuelGaona]

There is an issue, if you select index 2, and you close it, the animation runs fine, it vanish inside the original node that was clicked, but if you move to another slide, and close it, it shrink to the corresponding original node, but it does not fade out. Can you look into it?

Great job with the library, the usage of $thumb should be documented.

[fancyapps]

Hi,

It should work better in v5. If you experience issues, please, open new issue.

FYI, It is also possible to start Fancybox like this:

Fancybox.fromNodes(Array.from(document.querySelectorAll('[data-fancybox="gallery"]')), {startIndex : 1});