0

YouTube /iFrameコンテンツにFancybox2を使用する場合、タイトルを「内部」に入れることはできますか？挿入しようとするときはいつでも

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

これを変更して、次のような「埋め込み」という単語を挿入する必要があります。

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

これは適切な方法ですか？

前もって感謝します。

4

1 に答える 1

2

多くの質問がありますか？

まず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ビデオを表示する適切な方法は、通常のリンク（上記の2番目の例のように）を使用することです。次に、fancybox- mediajsファイルを次のようにドキュメントに含めます。

<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 に答える