Fancybox は、豊富なポップアップ レイヤー効果を表示できる優れた jquery プラグインです。以前に記事で fancybox のポップアップ レイヤー効果を紹介しました。 fancybox と比較して、fancybox は DIV、画像、画像セット、Ajax データの読み込みに加えて、SWF ムービー、iframe ページなども読み込むことができます。 。
ファンシーボックスの機能:
画像、HTML テキスト、Flash アニメーション、iframe、および Ajax をサポートできます。
プレーヤーの CSS スタイルをカスタマイズできます
グループでプレイできます。
マウス ホイール プラグインが含まれている場合、fancybox は画像をめくるためのマウス ホイール スクロールもサポートします。
fancybox player は投影をサポートしており、より立体的な感覚を与えます。
豊富なパラメータ設定とメソッド呼び出し。
強力な拡張性。
使い方は?
この記事では、DEMO の Demo2 を例として、fancybox の使用方法を説明します。
1. JavaScript 参照と CSS ファイル参照を追加します
<link rel="stylesheet" type="text/css" href="fancybox.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/fancybox.js"></script>
2. HTML
<h4>图片集,支持键盘方向键</h4> <p> <a rel="group" href="images/b1.jpg" title="图片标题"><img alt="" src="images/s1.gif" /></a> <a rel="group" href="images/b2.jpg" title="图片标题"><img alt="" src="images/s2.gif" /></a> <a rel="group" href="images/b3.jpg" title="蓝天白云绿草"><img alt="" src="images/s3.gif" /></a> </p>
3. fancybox に電話します
$(function(){ $("a[rel=group]").fancybox({ 'titlePosition' : 'over', 'cyclic' : true, 'titleFormat' : function(title, currentArray, currentIndex, currentOpts) { return '<span id="fancybox-title-over">' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>'; } }); });
fancybox のパラメータ設定形式は 'key':'value' であることに注意してください。 titlePosition: 画像タイトルの表示位置を画像上のに設定します。サイクリック: 画像閲覧モードをサイクリックブラウズに設定します。 titleFormat: 画像のタイトルの形式を設定します。これにより、画像の総数と現在の画像の順序が表示されます。
fancyboxプラグインの主なパラメータとメソッドの一覧
パラメータ/メソッド | 説明 | デフォルト値 |
基本 | ||
幅 | コンテンツが swf、iframe、または単一行テキストの場合、ポップアップ シリアル ポートの幅を設定します。 「autoDimensions」は false に設定する必要があります |
560 |
身長 | コンテンツが swf、iframe、または単一行テキストの場合、ポップアップ シリアル ポートの高さを設定します。 「autoDimensions」は false に設定する必要があります |
340 |
周期的 | コンテンツが写真集の場合にループ表示するかどうか。 | 偽 |
centerOnScroll | ポップアップは常にブラウザの中央に表示されます。 | 偽 |
モーダル | モーダルウィンドウを使用するかどうか。true に設定した場合、次も含める必要があります: 'hideOnOverlayClick'、'hideOnContentClick'、 「enableEscapeButton」、「showCloseButton」を false に設定、「overlayShow」を true に設定 |
偽 |
タイトル位置 | タイトルの位置は「外側」、「内側」、または「上」に設定できます | 「外」 |
transitionIn、transitionOut | ウィンドウ表示モードは「エラスティック」、「フェード」、または「なし」に設定できます | 「フェード」 |
送信 | メソッドは、サーバーが処理用のパラメーターを受信できるように、トリミングされた画像のデータをサーバーに送信します。 例: Cropzoom.send('process.php','POST',{id=1},function(r){alert(r); }); |
|
メソッド | ||
$.fancybox.showActivity | 読み込みアニメーションを表示 | |
$.fancybox.hideActivity | 読み込み中のアニメーションを非表示にする | |
$.fancybox.close | ウィンドウを閉じる | |
$.fancybox.resize | コンテンツに合わせてウィンドウの高さを自動的に調整します | |
中央に配置 | 選択範囲を中央に配置するかどうか、つまりコンテナの中央に表示するかどうか。 |
上記の内容は、ソース コードのダウンロード付き Jquery プラグインの Fancybox のリッチ ポップアップ レイヤー エフェクトに関する全説明です。