单击 div 时打开 fancybox iframe

Question

使用 fancybox2 并尝试在点击 div

时打开 YouTube 视频

<div class="vid" data-href="http://www.youtube.com/embed/gGFXXWsCiVo?autoplay=1">This DIV should open fancybox</div>    

$(".vid").fancybox({
type: "iframe",
onStart: function (el, index) {
    var thisElement = $(el[index]);
    $.extend(this, {
        href: thisElement.data("href")
    });
  }
});

但它确实工作，请帮助。

jsfiddle

Answer 1

好吧，我不知道你为什么要把这个花哨的东西复杂化成这样，为什么需要 'thisElement' 变量？您应该向我们提供更多详细信息，以确保我们真正了解您的需求……我在这里为您提供一些打开 fancybox 的提示……:

当您使用 fancybox 时，只需像这样启动它：

//event function(){
$('.vid').click(function(){
    $.fancybox({
        //settings
        'type' : 'iframe',
        'width'     : 640,
        'height'        : 480,
        //You don't need your thisElement var, see below : 
        'href'          : $(this).data('href')
    });
});

并将您的设置放入其中，

这是您的起点，现在只需对其进行自定义以使其更好地满足您的需求：

http://jsfiddle.net/rtp7dntc/9/

希望对您有所帮助！

Answer 2

为了使事情变得更简单，您可以在 div 上使用特殊的 data-fancybox 属性，例如

<div class="vid" data-fancybox-href="http://www.youtube.com/embed/gGFXXWsCiVo?autoplay=1" data-fancybox-type="iframe">This DIV should open fancybox</div>

然后使用像这样简单的脚本

jQuery(document).ready(function ($) {
    $('.vid').fancybox();
}); // ready

见JSFIDDLE

注意:

在接受的答案中以编程方式触发 fancybox 的缺点是它只会触发单个 fancybox 但不适用于画廊，而您可以使用绑定多个 div 的 fancybox 画廊data-fancybox-group 属性。

单击 div 时打开 fancybox iframe

Open fancybox iframe when click on a div

javascript

jquery

onclick

fancybox-2