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

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

WBOY

リリース： 2016-05-16 15:28:19

オリジナル

1101 人が閲覧しました

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	コンテンツに合わせてウィンドウの高さを自動的に調整します
中央に配置	選択範囲を中央に配置するかどうか、つまりコンテナの中央に表示するかどうか。