javascript - 在turnjs区域触发fancybox

Question

我正在制作一本数字杂志。几乎完成了，除了最后一部分。TurnJS 有这个区域功能，您可以在其中定义图像上的可点击区域并执行诸如转到 URL 或转到特定页面之类的操作。目标是触发包含 youtube 视频的 fancybox。

这是我到目前为止所拥有的：

12-regions.json：

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

Fancybox 触发器：

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

这是它的样子：

点击“观看独家视频”应调用 Fancybox。

这是生成的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>

我会错过什么？每当我单击所述区域时，它只会打开一个新选项卡并在那里加载视频。

希望你能帮我解决这个问题。提前致谢！

Answer 1

通过执行$( something ).fancybox()，您只是在该元素上附加了一个单击事件，而fancybox 将仅在下一次单击时启动。

如果您想立即启动 fancybox，那么您必须使用$.fancybox.open( .. )，请参阅文档以获取更多示例。