Question

使用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">

这是一种正确的方法吗？

提前致谢。

Answer 1

很多问题呃？

首先，要获取fancybox中的title，请使用helpers选项

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

第二次，设置一个带有链接的title ...我建议您在锚点中设置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>

Fancybox 2在YouTube（iframe）上标题为“Inside”？

1 个答案: