Demo

商品画像と最終ページへのリンク設置

jQuery('#dvFlipArea1').imgFlip( 
  {flipMode:'scroll-x', animDuration:400, captionMode:'slide-y-dr300+dl100+o0.8'} );
);

最もオーソドックスなimgFlipの利用法と言える個別商品の画像による紹介ページです。次のページと前のページへ移動するボタンと商品の詳細ページへのリンクがコントロール部として設置されています。 ページ切替は横方向のスクロール(flipMode:'scroll-x')。

また、各ページにはHTML5のカスタムデータ属性(custom data attribute)を利用した キャプションが設定されており、ページに合わせてキャプションも表示されます。(captionMode:'slide-y-dr300+dl100+o0.8')

<div class="imgflip_page" data-caption="モンスターハンターポータブル 3rd"><img src="...

---

imgFlipのデフォルトではページクリックにより次ページへ切り替わりますので、Nextボタンでは無くページをクリックする事でも次ページへ進みます。 ここではループ設定はされていませんので最終ページクリックでは本来何も行いませんが、逆にpreventDefaultを行っている訳でもありませんので、 最終ページに設定された商品ページへのリンクがそのまま機能し、リンク先へ移動します。(このdemoでは単にalert表示を行うだけです)

---

複数の商品紹介ページの切替

jQuery('#dvFlipArea2').imgFlip( 
  {autoFlip:8000, bLoop:true, flipMode:'slide-x-f', animDuration:600, bClickNext:false}
);

ここでは画像では無く、Amazonの広告リンクのiframeがそのまま1ページ単位となります。 切替えエフェクトはフェード付きの横方向のスライド(flipMode:'slide-x-f')。

自動切替(autoFlip:6000)とループ(bLoop:true)が設定されていますので、自動で商品情報が切り替わります。 ここではPrev/Nextのコントロールボタンが設置されており、それらのボタンでのページ移動操作を行う事でページの自動切替が停止します(デフォルト設定では)。

ちなみにスクロールとスライド切替の違いは、スクロールでは次に表示するページが現在表示されているページを押し出す形で同時に移動するのに対し、 スライドは次に表示するページが現在のページの上に重なって表示される、という違いとなります。

---

スライドショー的なサイズの異なる画像の自動切替

jQuery('#dvFlipArea3').imgFlip( 
  {autoFlip:10000, bLoop:true, bClickNext:false, flipMode:'fade-cross', animDuration:500} 
);

これは最も単純な形である画像の表示切替となります。コントロール部分も無く、自動切替(autoFlip:4000)とループ(bLoop:true)が設定されているだけなので、 単にページを順に表示するだけの機能となります。

画像(ページ)クリックで次のページに切り替わる事はありません(bClickNext:false)が、1ページ目(MooTools)の画像にはリンクが設定されていますので、 画像クリックにより指定ページへ移動します。

ここでの切替エフェクトはクロスフェード(flipMode:'fade-cross')。 1.現在の画像をopacity:0に、2.次の画像をopacity:1へ、3.次の画像サイズに表示エリアをリサイズ の3つのエフェクトが同時に行われます

設定方法

スクリプトの読み込み

まずHTML headでスクリプトを指定します。

<script type="text/javascript" charset="utf-8" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" charset="utf-8" src="imgflip.js"></script>

---

class属性値での各要素の指定

<div id="dvFlipArea1">
 <div class="imgflip_img">
  <div class="imgflip_page" data-caption="モンスターハンターポータブル 3rd"><img src="http://ec3.images-amazon.com/images/I/51u5c-FDPCL._AA300_.jpg" width="300" height="300" /></a></div>
  <div class="imgflip_page" data-caption="メーカー: カプコン"><img src="http://ec3.images-amazon.com/images/I/51xy-ZndndL._AA300_.jpg" width="300" height="300" /></div>
 </div>
 <button type="button" class="imgflip_prev ctrlBtn subBtn">Prev</button>
 <span class="imgflip_link"><a target="linkSite">商品ページ</a></span>
 <button type="button" class="imgflip_next ctrlBtn subBtn">Next</button>
</div>

imgFlipで管理する項目は以下のような種類があります。 それぞれの機能のデフォルト設定はありませんので、利用したい場合にはHTML中に記述する必要があります。

各項目の指定ではSizzle形式のセレクタ文字列が利用出来ますが、デフォルトではclass属性値での指定となっていますので、 オプションで変更するのでは無ければ、下記の項目名の横に太文字で記した文字列をclass属性値に設定して下さい。

---

ベースエリア

imgFlipのページ表示エリアや各ページ、ページ移動などのコントロール部分は全てこのベースとなる要素内に記述されている必要がある。

ページ表示エリア .imgflip_img

各ページが実際に表示される要素。overflow:hiddenやposition:staticならposition:relativeが自動的に適用される。 また、リサイズ時にはこの要素のwidth,heightが変更される。

ページ .imgflip_page

表示/切替単位となる各ページの指定

前のページへ移動 .imgflip_prev

前のページへ戻る。 ループ設定では無い場合には最初のページ表示時には非表示となる。

次のページへ移動 .imgflip_next

次のページへ進む。 同様に、ループ設定では無い場合には最後のページ表示時には非表示となる。

後はjQueryプラグインの定番である、ベースエリアの要素を指定するセレクタを指定してimgFlipを呼び出すだけです。(この例ではベースエリアはdvFlipArea1のidを持つ要素)

jQuery('#dvFlipArea1').imgFlip();

---

オプション設定

全体設定

Name	Type	Default	Description
flipMode	string	toggle	ページ切替えエフェクトの指定。type-desc-optのように3項目指定の設定もアリ
defaultPage	number	0	初期状態で表示するページを指定。0から開始するindex値。1ページ目は0。0未満やページ数以上の値が与えられた場合には0となる
bClickNext	boolean	true	ページをクリックした場合に次のページへ移動するか
autoFlip	number	0	自動でページ切替を行う場合にはinterval値をmsec単位で指定。0なら自動切替無し
bLoop	boolean	false	最後のページのNextで先頭ページに戻るか、先頭ページのPrevで最後のページに移動するか
bCancelAuto	boolean	true	自動切替中にNextやPrevなどでユーザー操作によりページ切替が行われた場合に、自動切替を停止するか
bReserveFlip	boolean	true	ページ遷移が行われているタイミングでページ切替操作が行われた場合に、現在の遷移エフェクト終了後に指定のページへの切替を開始するか
captionMode	string	false	キャプション表示指定。boolean falseと判定される値ならキャプション無効。type-desc-optのように3項目指定の設定もアリ
bBackRefer	boolean	true	Backコントロールを利用する場合に、Backがクリックされた時にhistory.backでは無く設定されていればdocument.referrerに移動するか
imgAreaW	number	null	ページ表示エリアの幅を固定したい場合に指定。nullならページのサイズに従い可変となる
imgAreaH	number	null	ページ表示エリアの高さを固定したい場合に指定。nullならページのサイズに従い可変となる
animDuration	number	300	ページ切替エフェクトの継続時間。単位msec
animEasing	string	swing	ページ切替エフェクトでの変化パターンを指定。jQueryのeasingとして利用出来る識別値
targSel	object		各種要素を指定するSizzle準拠のセレクタ文字列
css	object		imgFlipで自動作成される要素に設定されるCSSクラス名

---

flipMode設定

flipModeの設定では、slide-x-r+fのようにtype-desc-optという3項目が指定出来、それぞれの値はハイフン(-)で連結されます。 type/desc/optは、基本設定/詳細設定/オプションというような扱いとなります。

また、optには+で連結する事で複数の値を設定出来ます。

Class	Value	Required Type	Description
type	toggle	-	typeがtoggleの場合には、各ページをdisplay:blockとdisplay:noneで切替えるだけで遷移エフェクトは無し
type	scroll	-	スクロールは全てのページを1つのdiv要素内に並べて配置し、そのdiv要素を移動する事で表示切替を行う
type	slide	-	slideは各ページが重なるような形式の切替えで、指定ページが最前面に表示される
type	fade	-	fadeはページの移動は行わずに、opacityの増減により表示の切替えを行う
desc	x	scroll/slide	scrollやslideでのページ表示方向。xは水平方向の移動となる。descが未設定の場合のデフォルト値
desc	y	scroll/slide	scrollやslideでのページ表示方向。yは垂直方向の移動
desc	in	fade	fade-in指定での切替は、現在のページは無変化で移動先のページがopacity:0から1に遷移し、徐々に表示されている形式。descが未指定の場合でのfadeのデフォルト
desc	inout	fade	fade-inoutでは、現在のページをopacity:0にする遷移が完了した後に、移動先ページをopacity:1にする遷移が開始されるような2段階の遷移となる
desc	cross	fade	fade-crossはクロスフェード指定。現在のページと移動先ページのopacity遷移が同時に開始される
opt	r	scroll/slide	scrollとslideではデフォルトで水辺方向では右から左、垂直方向では下から上に次のページが移動するが、optにrを指定する事により、それぞれ左から右、上から下に逆方向に移動となる
opt	f	slide	slideで、移動だけでは無くopacity:0から1に変化するfade効果も同時に行う

---

flipMode設定例:

slide

descにはデフォルトのxが適用され、右から左へ移動するスライド遷移

scroll-y-r

次のページが上から現れる形式のスクロール

slide-x-r+f

次のページが左から現れ、同時にfade効果も適用されるスライド遷移

---

captionMode設定

captionMode設定もflipModeと同様にtype-desc-opt構成ですが、opt値に数値指定が可能となり詳細な設定を行う事が出来ます。

Class	Value	Required Type	Description
type	slide	-	画面外からキャプションエリアが移動してくる遷移
type	fade	-	キャプションの移動は無く、opacity変化による表示遷移
desc	x	slide	キャプションが水平方向で移動
desc	y	slide	キャプションが垂直方向の移動により出現。descが未指定の場合のslideのデフォルト動作
desc	t	fade	デフォルトでは、キャプションはページの下部に表示されるが、t指定によりページ上部に表示される
opt	r	slide	slide遷移での移動方向が逆になるが、移動が垂直方向(desc:y)の場合には上から現れ上部に表示される
opt	dr\d+	slide/fade	キャプション表示遷移が完了するまでの経過時間。drに続けてmsec単位で指定
opt	dl\d+	slide/fade	キャプション表示はページ自体の遷移が完了した後に開始されるが、ページ遷移完了からキャプション表示開始までのディレイ時間 単位msec
opt	o[\d.]+	slide/fade	キャプションのslide表示でもfade効果を適用する場合や、fadeでの遷移終了時のopacity値を指定出来る。 0～1までの範囲で小数点込みの数値で指定

---

captionMode設定例:

slide

descにはデフォルトのyが適用され、下から移動しページ下部に表示

slide-x-r

ページの左から水平方向の移動で表示

fade--dr1000

fade効果でopacity:1になるまでの遷移時間が1秒

slide-y-dr400+dl200+o0.8

画面下から現れページ下部に表示されるslide。 ページ自体の表示遷移完了の200msec後にキャプションの表示が開始され、移動とopacity:0.8になるまでの継続時間が400msec