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

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

WBOY

リリース： 2016-05-16 18:51:14

オリジナル

1161 人が閲覧しました

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 段落が

で自動的に追加されます。

のリンクに「rel=lightbox」属性を追加します:

コードをコピーコード

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

rel: "lightbox" 
}); 


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

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

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

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

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

;script type="text/javascript" src ="/js/lightbox.js.php">

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