0

将 Fancybox 2 用于 YouTube/iFrame 内容时，是否可以将标题放在“内部”？每当我尝试插入

title: {
    type: 'inside'
}

然后视频在新窗口中全屏播放。这是我目前正在使用的：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<link rel="stylesheet" href="lib/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lib/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
      $(".vids").fancybox({
            maxWidth    : 800,
            maxHeight   : 600,
            fitToView   : false,
            width       : '60%',
            height      : '60%',
            autoSize    : false,
            closeClick  : false,
            openEffect  : 'none',
            closeEffect : 'none'
      });
  });
</script>

作为奖励，我希望标题文本包含一个可以打开的链接_blank。

此外，也许相关，要让视频在所有浏览器中播放，我必须更改 YouTube 链接，而不是执行以下操作：

<a class="vids fancybox.iframe" href="http://www.youtube.com/watch?v=whatever">

我得改一下，插入“embed”这个词，比如：

<a class="vids fancybox.iframe" href="http://www.youtube.com/embed/whatever">

这是一个合适的方法吗？

提前致谢。

4

1 回答 1

2

很多问题是吗？

首先，要进入titlefancybox，请使用helpers类似的选项

helpers: {  title : { type : 'inside' } }

其次，title使用链接设置 a ...我建议您data-*在锚点中设置一个属性，这样链接就不会出现在普通浏览器的工具提示中...类似于

<a class="vids" href="http://www.youtube.com/watch?v=whatever" title="normal title" data-caption="<a href='{new link}' >See more</a>">open video</a>

请注意，我没有添加target="_blank"，因为单击链接将自动导航到下一页（并关闭fancybox）

然后使用回调beforeShow构造title

beforeShow: function(){
 this.title = this.title + " " + $(this.element).data("caption");
}

第三，显示 youtube 视频的正确方法是使用普通链接（如我上面的第二个示例），仅此而已。然后在您的文档中包含fancybox-media js 文件，例如

<script type="text/javascript" src="lib/helpers/jquery.fancybox-media.js"></script>

（检查你自己的路径）

...并使用该helpers选项来设置媒体，如

helpers : {media : {} }

所以，总结一下，你的 html 应该是这样的

<a class="vids" href="http://www.youtube.com/watch?v=whatever" title="normal title" data-caption="<a href='{new link}' >See more</a>">open video</a>

和你的fancybox自定义脚本

<script type="text/javascript">
$(document).ready(function() {
 $(".vids").fancybox({
  maxWidth    : 800,
  maxHeight   : 600,
  fitToView   : false,
  width       : '60%',
  height      : '60%',
  autoSize    : false,
  closeClick  : false,
  openEffect  : 'none',
  closeEffect : 'none',
  helpers     : {  
        title : { type : 'inside' },
        media : {}
  },
  beforeShow: function(){
   this.title = this.title + " " + $(this.element).data("caption");
  }
 });
});
</script>
于 2012-10-04T17:59:55.637 回答