使用 click() 事件触发 FancyBox

Question

我试图在单击 DIV 时触发 FancyBox 覆盖。

（我看过几篇关于通过点击锚点触发 FancyBox 的帖子，但是 none 解决了这个问题。另外，我不能使用锚点而不是 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

将类型指定为 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。

Answer 2

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

<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

使用 click() 事件触发 FancyBox

Triggering FancyBox with click() event

html

css

jquery

fancybox