Jquery プラグイン Fancybox の豊富なポップアップ レイヤー エフェクトとソース コード download_jquery

WBOY
リリース: 2016-05-16 15:28:19
オリジナル
1114 人が閲覧しました

Fancybox は、豊富なポップアップ レイヤー効果を表示できる優れた jquery プラグインです。以前に記事で fancybox のポップアップ レイヤー効果を紹介しました。 fancybox と比較して、fancybox は DIV、画像、画像セット、Ajax データの読み込みに加えて、SWF ムービー、iframe ページなども読み込むことができます。 。

効果デモ ソースコードダウンロード

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

画像、HTML テキスト、Flash アニメーション、iframe、および Ajax をサポートできます。
プレーヤーの CSS スタイルをカスタマイズできます
グループでプレイできます。
マウス ホイール プラグインが含まれている場合、fancybox は画像をめくるためのマウス ホイール スクロールもサポートします。 fancybox player は投影をサポートしており、より立体的な感覚を与えます。

キーボードの矢印キーとESCキーをサポートします。

豊富なパラメータ設定とメソッド呼び出し。
強力な拡張性。

使い方は?

この記事では、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 &#63; ' ' + 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 のリッチ ポップアップ レイヤー エフェクトに関する全説明です。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート