ホームページ ウェブフロントエンド jsチュートリアル WordPressフォトライトボックスの使い方effect_jquery

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

May 16, 2016 pm 06:51 PM
lightbox wordpress 写真

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 ?>


上記は私のライトボックスの使い方です。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

PHP vs. Flutter: モバイル開発に最適な選択 PHP vs. Flutter: モバイル開発に最適な選択 May 06, 2024 pm 10:45 PM

PHP vs. Flutter: モバイル開発に最適な選択

ワードプレスでページ幅を変更する方法 ワードプレスでページ幅を変更する方法 Apr 16, 2024 am 01:03 AM

ワードプレスでページ幅を変更する方法

wordpressの記事はどのフォルダにありますか? wordpressの記事はどのフォルダにありますか? Apr 16, 2024 am 10:29 AM

wordpressの記事はどのフォルダにありますか?

ワードプレスで商品ページを作成する方法 ワードプレスで商品ページを作成する方法 Apr 16, 2024 am 12:39 AM

ワードプレスで商品ページを作成する方法

WordPress で著者を検索する方法 WordPress で著者を検索する方法 Apr 16, 2024 am 01:18 AM

WordPress で著者を検索する方法

WordPress のどのバージョンが安定していますか? WordPress のどのバージョンが安定していますか? Apr 16, 2024 am 10:54 AM

WordPress のどのバージョンが安定していますか?

ワードプレスのテンプレートファイルはどこにありますか? ワードプレスのテンプレートファイルはどこにありますか? Apr 16, 2024 am 11:00 AM

ワードプレスのテンプレートファイルはどこにありますか?

雷軍氏はシャオミのポータブルカメラが売り切れるとは予想していなかった:ポラロイドの代わりに399元 雷軍氏はシャオミのポータブルカメラが売り切れるとは予想していなかった:ポラロイドの代わりに399元 Jul 25, 2024 am 10:58 AM

雷軍氏はシャオミのポータブルカメラが売り切れるとは予想していなかった:ポラロイドの代わりに399元

See all articles