Question

我试图在点击DIV时触发FancyBox叠加。

（我已经看过几篇关于从Anchor点击触发FancyBox的帖子，但没有人说这个。另外，我不能使用Anchor而不是DIV，因为我的可点击叠加将包含几个块元素，它具有内联元素跨越块元素并不是犹太人。）

这是我的代码的简化版本。（我将在最后用完整代码附加一个JSfiddle）：

<div id="eAcon6LPgHo" class="youtube_box">
    <img src="http://img.youtube.com/vi/eAcon6LPgHo/0.jpg"/>
    <span class="caption">
        <h3>Dan Bull Raps Fast</h3>
    </span><!--/.caption-->
</div><!--/.youtube_box-->

$( document ).ready(function() {
    $( ".youtube_box" ).click(function() {
        var YouTubeID = this.id;
        // alert( "clicked: " + YouTubeID );
        $.fancybox({
            href : 'http://www.youtube.com/embed/' + YouTubeID + '?autoplay=1'
        });
    });
});

点击我的DIV后，将从元素ID中检索YouTube ID（我已使用已注释的警报进行测试）。但是，永远不会触发FancyBox，也不会收到任何错误消息。

我在这里用我的代码设置了一个完整的JSfiddle： http://jsfiddle.net/5pd6egbo/

请帮忙！

Answer 1

最简单的方法之一是使用data-fancybox标记中的特殊<div>属性，如：

<div id="eAcon6LPgHo" class="youtube_box" data-fancybox-href="http://www.youtube.com/embed/eAcon6LPgHo?autoplay=1" data-fancybox-type="iframe">
    <img src="http://img.youtube.com/vi/eAcon6LPgHo/0.jpg"/>
    <span class="caption">
        <h3>Dan Bull Raps Fast</h3>
    </span><!--/.caption-->
</div><!--/.youtube_box-->

然后你可以使用通常的fancybox初始化脚本：

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

无需使用.click()方法。

参见 JSFIDDLE

Answer 2

将类型指定为iframe似乎可以使其正常工作。

$( document ).ready(function() {
   $( ".youtube_box" ).click(function() {
      var YouTubeID = this.id;

      $.fancybox({
          href : 'https://www.youtube.com/embed/' + YouTubeID + '?autoplay=1'
      }, {
          type: 'iframe'
      });
   });
});

请参阅此Fiddle。

使用click（）事件触发FancyBox

2 个答案: