Trigger fancybox on turnjs region

Question

I'm working on a digital magazine. Almost done except for the last part. TurnJS has this region function where you can define a clickable area on the image and do things like go to a URL or go to a specific page. The goal is to trigger fancybox containing the youtube video.

Here's what I have so far:

12-regions.json:

[{
    "x":20,
    "y":95,
    "width":126,
    "height":50,
    "class":"link",
    "data":
        {
            "url": "https://www.youtube.com/embed/c5vtcm4hRGs?autoplay=1"
        }
}
]

Fancybox trigger:

 $( '.magazine .p12' ).on( 'click', 'div.region.link', function () { 
            $('.region.link').fancybox({
                openEffect  : 'none',
                closeEffect : 'none',
                helpers : {
                    media : {}
                }
            });
        });

Here's how it looks like:

Fancybox should be called on click of the "watch the exclusive video".

Here's the generated region element of turnjs:

<div class="region  link" region-data="url=https%3A%2F%2Fwww.youtube.com%2Fembed%2Fc5vtcm4hRGs%3Fautoplay%3D1" style="top: 16%; left: 4%; width: 27%; height: 8%;"></div>

What could I be missing? Whenever I click the said region, it just opens a new tab and loads the video there.

Hope you can help me figure this out. Thanks in advance!

Answer 1

By executing $( something ).fancybox() you are just attaching a click event on that element and fancybox will start only on the next click.

If you wish to immediately start fancybox, then you have to use $.fancybox.open( .. ), see docs for more samples.