0

「href」属性を除いて、アンカー タグの HTML コードを変更できない状況があります。したがって、クラスをアンカー タグに追加することはできません。

HTML マークアップは次のとおりです。

<a href="http://www.youtube.com/watch?v=#########&amp;autoplay=1"></a>

このリンクと他のリンクを区別するために、「href」に基づくセレクターを jQuery コードに追加しました。

コードは次のとおりです。

(function ($) { 

  $('a[href*="youtube"]').fancybox({
            'padding' : 0,
            'type' : 'swf',
            'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
            'swf' : { 'wmode' : 'transparent', 'allowfullscreen' : 'true' }
            });
e.preventDefault();

})(jQuery);

これはまったく機能していないようです。誰が私が間違っているのか教えてもらえますか? 私は Drupal を使用しているため、上部に「$」を有効にする部分を追加したのはなぜですか。

コンソールにエラーは表示されません。ページは JavaScript の介入なしで YouTube ページに直接移動します。

4

2 に答える 2

2 
adding a class to the anchor tag is not an option

次のようにjQueryを介していつでもクラスを追加できるため、必ずしもそうではありません

$('a[href*="youtube"]').addClass("fancybox")

swfとにかく、個人的には、YouTube ビデオにモードを使用するのはもう好きではありませんiframe。これにより、扱いやすく、クロスプラットフォーム対応 (iOS を含む) になります。

私がすることは、.each()メソッドを使用することです:

  • javascriptを使用してすべてhrefをフォーマットに変換するembed.replace()
  • 各アンカーを fancybox にバインドします
  • hreffancybox hrefAPI オプションを使用して新しい変換を設定します

これは fancybox v1.3.4 または v2.x の両方で機能するコードです: 

(function ($) {
  $(document).ready(function(){
    $('a[href*=youtube]').each(function () {
        // convert youtube swf href to embed for iframe
        var thisHref =  this.href
                       .replace(new RegExp("watch\\?v=", "i"), 'embed/')
                       .replace(new RegExp("&", "i"), '?');
        // bind fancybox to each anchor
        $(this).fancybox({
            "padding" : 0,
            "type" : "iframe",
            // add trailing parameters to href (wmode)
            "href" : thisHref + "&amp;wmode=opaque"
        }); // fancybox
    }); // each
  }); // ready
})(jQuery);

を追加したことに注意wmode=opaqueしてください。そうしないと、閉じるボタンが YouTube ビデオの後ろに表示されます。

バージョン 1.3.4 の JSFIDDLE ... またはv2.1.4のJSFIDDLEを参照してください。

于 2013-03-31T19:49:52.233 に答える