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();
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 つのステップで、テキスト内にリンクのあるすべての画像にライトボックス効果が自動的に実装されます。
});
上記 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 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 までご連絡ください。

人気の記事
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?
3週間前
By DDD
レポ:チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
2つのポイント博物館:すべての展示とそれらを見つける場所
3週間前
By 尊渡假赌尊渡假赌尊渡假赌

人気の記事
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?
3週間前
By DDD
レポ:チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
2つのポイント博物館:すべての展示とそれらを見つける場所
3週間前
By 尊渡假赌尊渡假赌尊渡假赌

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

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

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

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

ホットトピック
Gmailメールのログイン入り口はどこですか?
7128
9


Java チュートリアル
1534
14


Laravel チュートリアル
1256
25


PHP チュートリアル
1205
29


CakePHP チュートリアル
1153
46



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