Fancybox模式窗口不会在页面加载时自动打开

时间:2012-11-28 13:49:30

标签: jquery fancybox fancybox-2

我经历了很多相关的帖子,但我无法深究它。我的网站主页上有一个视频。当访问者点击播放视频图形时,YouTube视频将在Fancybox模式中播放。我想发送一封电子邮件通讯,鼓励订阅者通过点击新闻通讯中的链接来观看视频,该链接将他们带到我的网站并自动启动播放视频的Fancybox模式。但是,我不能让这个工作。在我的头标记中,我有:

<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="{$base_url}/assets/js/fancybox/source/jquery.fancybox.js?v=2.1.3"></script>
<link rel="stylesheet" type="text/css" href="{$base_url}/assets/js/fancybox/source/jquery.fancybox.css?v=2.1.2" media="screen" />

<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="{$base_url}/assets/js/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.5"></script>

<script type="text/javascript">
  $(document).ready(function() {
    $('#video-intro').fancybox({
      openEffect : 'none',
      closeEffect : 'none',
      prevEffect : 'none',
      nextEffect : 'none',
      arrows : false,
      width   : '640',
      height    : '360',
      helpers : {
        media : {}
        buttons : {}
      }
    });
  });
</script>

<script type="text/javascript">
  $(document).ready(function() {
    $("#video-intro").trigger('click');​
  });
 </script> 

在我体内,我有以下链接:

<a id="video-intro" href="http://www.youtube.com/embed/Scd0dmAod-k?rel=0" onClick=”_gaq.push(['_trackEvent', 'Video', 'Play', 'RentPro Overview Video']);”><img src="{$base_url}assets/img/play-video.png" width="425" height="239" alt="Click to play RentPro overview video" style="border:1px solid #fff;" /></a>

但是我不能让它自动显示模态并在页面加载时播放视频。实际的href有一个onClick事件,用于向Google Analytics注册事件。

1 个答案:

答案 0 :(得分:2)

单个脚本应该足够了:

$(document).ready(function() {
    $('#video-intro').fancybox({
        openEffect: 'none',
        closeEffect: 'none',
        prevEffect: 'none',
        nextEffect: 'none',
        arrows: false,
        width: 640,
        height: 360,
        helpers: {
            media: {},
            buttons: {}
        },
        type: "iframe"
    }).trigger("click");
}); // ready

注意我已从您的脚本中更正了以下内容:

  • 整数值不带引号
  • media : {}, //<-- comma here之后缺少逗号以将其与以下选项buttons: {}
  • 分开
  • 我将.trigger("click")设置为相同的选择器,因此不需要两个不同的脚本
  • 由于您使用的是YouTube的embed表单,因此我向API选项添加了type: "iframe"

看到它在 jsfiddle

中工作

分析onclick不应成为问题,您可以在console.log

中看到
相关问题