web-dev-qa-db-ja.com

デフォルトのギャラリーにclass = "fancybox"を追加するにはどうすればいいですか？

私はこのショートコードを試してみました：

[ギャラリークラス= "fancybox"リンク= "ファイル"列= "5"]

しかし、class = "fancybox"は各画像のhrefタグには追加されていません。

どのように私はそれぞれのhrefタグにclass = "fancybox"を追加することができますか？

pS：ギャラリーのソースコードはどこですか？

gallery
3
alex

これを解決するためにjavascript/jqueryを使うことができます。

ワードプレスの投稿にギャラリーを挿入すると、ギャラリー全体が "gallery-1"のようなidのdivで囲まれますが、常に "gallery"のクラスもあります。また、すべてのアイテムは、クラス "gallery-item"と "gallery-icon"をそれぞれ持つ2つの他の "dl"と "dt"に囲まれています。

そのため、jqueryを使用してこれらのクラス内のすべてのリンクに一致させ、必要なライトボックススクリプトを追加するだけで済みます。

それがファンシーボックスなら、私はこのような何かがうまくいくはずだと思います：

jQuery(".gallery-icon a").fancybox();

より具体的には、CSSクラス .gallery .gallery-item .gallery-icon の順に、次に a （リンク用）を一致させることができます。

ユーザーがギャラリーとして画像間を移動できるようにする場合は、次のコマンドを使用します。

jQuery(".gallery-icon a").fancybox().attr('data-fancybox', 'gallery');

もっと粒度の細かい制御が必要な場合（同じページの複数のギャラリー）、 この回答を確認してください 。

あるいは、同じアプローチ Viper007Bondから を使用する単純なプラグインを使用します。これは、きれいでうまく機能しますが、代わりにcolorboxを使用します。

8
TCattd
jQuery(".gallery-icon a").fancybox().attr('data-fancybox', 'wp-gallery-fancybox');

すべてのリンクに同じrel属性を与えます。これにより、ユーザーは画像間をスライドできます。

4
Freek Bron

これらの答えは大丈夫でしたが、今やfancyboxは仕様を変更しました。 rel = galleryではなく、 "data-fancybox = gallery"です。そのため、新しいスクリプトは次のようになります。

 jQuery(".gallery-icon a").fancybox().attr('data-fancybox', 'gallery');

そして

jQuery('.gallery').each(function() {
            // set the rel for each gallery
            jQuery(this).find(".gallery-icon a").attr('data-fancybox', 'group-' + jQuery(this).attr('id'));
        });
0
David A. French

ここで@kaiserの上に構築する -

各ギャラリーは理想的には一意のIDを取得しますが、投稿とページに複数のギャラリーを含めることができるようになったため、phpでは各ギャラリーに一意のrel識別子を割り当てることができません。

jQuery('.gallery').each(function (g) {
    jQuery('a', this).attr('rel', function (i, attr) {
         return attr + ' gallery-' + g;
    });
});`

あなたのセレクタを気にしてください、あなたのテーマはそれらを書き換えるかもしれません。これは http://kaspars.net/blog/wordpress/add-rel-attribute-to-each-gallery-post で詳細に説明されています。

0
orionrush