1

私はワードプレスを初めて使用し、カスタム テーマ ( http://demo.richwp.com/showcasedark/ ) を使用しています。

独自のカスタム ライトボックス スクリプト (画像ごとにカスタム クラスが必要) を使用したいのですが、そのクラスを画像ギャラリーに適用しようとして行き詰まっています。

たとえば、すべての画像はデフォルトで次の html コードになります。

a href="_images/anim_reel001.jpg" (画像ソースの詳細が続きます)

私はそれを次のようにしたい：

a href="_images/anim_reel001.jpg" class="view" (img ソースの詳細が続きます)

これを行う方法は、functions.php ファイルでカスタム関数を作成することのようですが、私は PHP スクリプトについてまったく無知です。また、これが既存の画像で機能するのか、アップロードした新しい画像/ギャラリーでのみ機能するのかはわかりません. どんな助けでも大歓迎です！

4

1 に答える 1

2

jQuery がオプションの場合...すべてのギャラリーをターゲットにして、そのクラスをアンカーに追加するようにします。ここで実際にこれを見ることができます：

デモ

フィドルの結果のプレースホルダー画像のソースを表示すると、マークアップに<a>はクラスがありませんでしたが、現在はクラスが含まれていることがわかります。

これは、WordPress ギャラリーの出力を模倣する 3 つのコード ブロックで動作します。

HTML

<div id="gallery-1" class="gallery">
  <dl class="gallery-item">
    <dt class="gallery-icon">
      <a href="#">
        <img width="75" height="75" src="http://dummyimage.com/75x75/000/fff.jpg" class="attachment-thumbnail" />
      </a>
    </dt>
  </dl>

  <dl class="gallery-item">
    <dt class="gallery-icon">
      <a href="#">
        <img width="75" height="75" src="http://dummyimage.com/75x75/000/fff.jpg" class="attachment-thumbnail" />
      </a>
    </dt>
  </dl>

  <dl class="gallery-item">
    <dt class="gallery-icon">
      <a href="#">
        <img width="75" height="75" src="http://dummyimage.com/75x75/000/fff.jpg" class="attachment-thumbnail" />
      </a>
    </dt>
  </dl>

  <dl class="gallery-item">
    <dt class="gallery-icon">
      <a href="#">
        <img width="75" height="75" src="http://dummyimage.com/75x75/000/fff.jpg" class="attachment-thumbnail" />
      </a>
    </dt>
  </dl>

CSS

#gallery-1 {
  margin: auto;
}
#gallery-1 .gallery-item {
  float: left;
  margin-top: 10px;
  text-align: center;
  width: 25%;            }
#gallery-1 img {
  border: 2px solid #cfcfcf;
}
#gallery-1 .gallery-caption {
  margin-left: 0;
}

jQuery

$(document).ready(function(){
  $('div.gallery').each(function(i) {
    $('.attachment-thumbnail').parent().addClass('view');
  });
});

コードの jQuery ブロックで良いことが起こっています。ドキュメントの準備ができたら、すべてのギャラリーを で選択し、div.galleryそれぞれをループして.attachment-thumbnail、<img>WordPress ギャラリーの親指で、<img>たまたま<a>タグである の親をターゲットにして、呼び出したいクラスを追加します.view。

このソリューションを機能させるには、ファイルに jQuery を含める必要があることに注意してください。そうしないと、機能しません。すでに jQuery が含まれている可能性があります。

于 2013-08-03T12:31:34.957 に答える