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

好吧，我不知道为什么你这样的fancybox事情复杂化了，你为什么需要'thisElement'var？你应该给我们一些更多的细节，以确保我们真正了解你的需求...我在这里给你一些打开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

为了简单起见，您可以使用data-fancybox上的特殊div属性

<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

2 个答案: