WordPressフォトライトボックスの使い方effect_jquery

Web サイトでライトボックスなどのエフェクトをすでに使用している場合、または次のアプリケーション エクスペリエンスが適している可能性があります (JQuery を使用して実装されている場合)。
1. ライトボックス効果が使用される条件を指定します
Web サイトの js ファイルに次のステートメントを追加します:

コードをコピー コードは次のとおりです:

$(function() {
$('a[@rel*=lightbox]') .lightBox();
$ ('.gallery a').lightBox();

これは、リンクに「rel=lightbox」を追加した後にのみ決定されます。 、リンクにはライトボックス効果が適用されます。2 行目の「.gallery a」は WordPress のネイティブ フォト アルバム用です。この文を追加すると、アルバム内の写真にもライトボックス効果が適用されます。

2. rel=lightbox 属性を自動的に追加します。
上記の定義では「rel=lightbox」を含むリンクのみが有効となるため、通常はアップロードされた画像ごとに手動で追加する必要があります「rel=ライトボックス」。しかし、これは面倒なようですが、リンク付きの画像を自動的に追加できるようにすることができます。 まず、画像を含む各 p 段落にスタイルを自動的に追加します。
$("#content p:has(img)").addClass("imgbg");
たとえば、上の文は次のとおりです。 #content エリアで、段落内に img がある限り、スタイル「imgbg」を追加して、元のスタイルなしの p 段落が <p class="imgbg"> で自動的に追加されます。 <p class="imgbg"> のリンクに「rel=lightbox」属性を追加します:

コードをコピー コード

$(".imgbg a").attr({

rel: "lightbox"
});


上記 2 つのステップで、テキスト内にリンクのあるすべての画像にライトボックス効果が自動的に実装されます。

3. ライトボックスを選択的に読み込む
サイト全体にライトボックス効果を読み込む必要はありません。一般的に、この効果は別の記事ページでのみ使用されます。したがって、ライトボックスの js コードを分離し、WordPress の header.php で次のように設定できます。

コードをコピー コードは次のとおりです:

<?php if ( is_single() ) : ?>

<script type="text/javascript" src="<?php bloginfo( 'template_url') ; ?>/js/lightbox.js"></script>
<?php endif ?>


記事に写真のみを追加したい この効果を実装するには、「写真」タグが付けられた記事のライトボックスを正確に読み込むことができます:

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

<?php if ( is_single() && has_tag('photo') ) : ?> ;script type="text/javascript" src ="<?php bloginfo('template_url'); ?>/js/lightbox.js.php"></script>

<?php endif ?>


上記は私のライトボックスの使い方です。