fancybox は優れた jquery ポップアップ レイヤー表示プラグインです

今日は、優れた jquery ポップアップ レイヤー表示プラグイン fancybox を共有します。画像の表示に加えて、Flash、iframe コンテンツ、HTML テキスト、および Ajax 呼び出しも表示でき、CSS を通じて外観をカスタマイズできます。

ファンシーボックスの機能:

1. 画像、HTML テキスト、Flash アニメーション、iframe をサポート可能そして、ajax サポート;

2. プレーヤーの CSS スタイルをカスタマイズできます。

3. グループでプレイできます。

4. マウス ホイール プラグインが含まれている場合、Fancybox は画像を切り替えるためのマウス ホイール スクロールもサポートします。
   fancybox プレーヤーは投影をサポートしており、より立体的な感覚を与えます。
fancybox の使用方法:

まず、jquery コア ライブラリを導入する必要がありますfancybox プラグイン:

トランジション (一部のアニメーション効果) を使用する必要がある場合は、次の js も導入する必要があります:

<script></script><script></script>

マウスをサポートする必要がある場合 ホイール スクロール効果のために、次の JS も導入する必要があります:

<script></script>

次にスタイル シートを導入します:

<script></script>

をページに追加します。 a タグ:

<link>

a タグの href 内の画像は次のとおりです。ポップアップ レイヤーを表示する必要がある大きな画像。

<a><img  src="/static/imghwm/default1.png" data-src="image_small.jpg" class="lazy" alt="fancybox は優れた jquery ポップアップ レイヤー表示プラグインです" ></a>

最後にファンシーボックス メソッドを呼び出します:

もちろん、これで表示できる画像は 1 枚だけですが、場合によっては写真を作成する必要があるかもしれません。クラスの写真が複数ある場合は、rel 属性を使用して写真グループ (つまり、ファンシーボックス機能の 3 番目のポイント) を作成できます。次のコード:

$("#single_image").fancybox();

呼び出し方法も非常に簡単です:

<a><img  src="/static/imghwm/default1.png" data-src="image_small_1.jpg" class="lazy" alt="fancybox は優れた jquery ポップアップ レイヤー表示プラグインです" ></a><a><img  src="/static/imghwm/default1.png" data-src="image_small_2.jpg" class="lazy" alt="fancybox は優れた jquery ポップアップ レイヤー表示プラグインです" ></a>

fancybox パラメータ:

$(".grouped_elements").fancybox();

fancybox はパラメータ設定が非常に優れているため、優れています。強力で、ほぼすべてのニーズを満たすことができます。

公式サイトアドレス：

http://fancybox.net/

上記はこの章の全内容です。その他の関連チュートリアルについては、jQuery ビデオ チュートリアル をご覧ください。