[MooTools] mooContreGallery Plugin

mooContreGalleryはhttp://www.contreforme.ch/のProjectsページで使われている
画像拡大、スクロール、インフォメーション表示など一連のエフェクトを貴方のサイトに実装するプラグインです。
本家サイトの動きをClass化＋最新バージョンに対応させつつ再現したものですが、
オプションを変更する事によってエフェクトをお好みにアレンジすることが出来ます。

View Demo

当プラグインの公開についてはcontreforme sàrlの中の人に許可を頂きました。
This class original source created from contreforme sàrl. Thank you!

また、このプラグインは「これどうやって作るの？」という質問がきっかけで出来たものです。
jQueryではやる気が出ず、MooToolsでの回答になりましたが(笑)質問を送ってくれたH氏にも感謝！
チュートリアル記事はこちら »

使い方

mooContreGalleryを使用するにはMooTools1.2.3以上が必要です。
ダウンロードのZIPには必要なCoreとMoreが含まれていますが、一応必要ファイルの入手から解説します。

MooToolsのダウンロードページからMooTools Coreファイルをダウンロードしてください。

その後More Builderのページに飛んで、
Fx.Scroll、Fx.Slide、Assetsの３つをチェックしてダウンロードしてください。
（MoreクラスはCoreと同バージョンでないと動作しません）

ダウンロードしたファイルを適当に名前を変更したら、ページのheadにScriptタグで読み込ませます。

<script src="js/mootools-1.2.4-core.js" type="text/javascript"></script>
<script src="js/mootools-1.2.4-more.js" type="text/javascript"></script>
<script src="js/mooContreGallery.js" type="text/javascript"></script>

その後にプラグインを動かすためのソースを記述します。
最小構成は次のようなものです。

<script type="text/javascript">
//<!&#91;CDATA&#91;
window.addEvent("domready",function(){ 
	new mooContreGallery("gallery");
});
//&#93;&#93;>
</script>

カッコの中（第一引数）に、ギャラリーのＩＤを入れます。

(X)HTML & CSS Styling

簡単に言えばcontreforme sàrlと同じ構造で作れば間違いはないのですが、
まとめると以下のような条件があります。

ID指定したギャラリーの子要素（サンプルではリスト）の中にサムネイル画像や説明を入れる
サムネイル画像を入れる要素(class=”thumb”)とサムネイル画像(img tag)、説明の要素(class=”info”)は必須
子要素にはcursor:pointerでクリックイベントがある事を示しておく。
サムネイル画像はFloatで左寄せにする
サムネイル画像のファイル名は、判別キーを拡張子前に含める
（デフォルトでは_thumbなのでcat1_thumb.jpgなどとする）
サムネイル画像を入れている要素(class=”thumb”)はbackgroundでローディング画像を上下中央に表示させる
Fx.Scrollでスクロールさせる場合は下方向に余裕がないと途中でつっかえてしまうので、
スタイルシートでpadding-bottom:600pxなどして余白を作っておく

XHTMLソースの例

<ul id="gallery"><!--ID指定するギャラリー-->
	<li><!--ギャラリーの子要素（自動取得）-->
	<p class="thumb"><img src="images/cat1_thumb.jpg" alt="cat1" width="100" height="68" title="cat1" />
		<!--サムネイル画像とそれを入れる要素。クラス名必須-->
	</p>
	<div class="info">
		<!--スライドされる説明要素。クラス名必須-->
	</div>
	</li>
</ul>

デモはリストで作られているんですが、入れ子関係とIDやクラス名が合っていれば違う要素でも作れます。
IDやクラス名はオプションで変更可能です。

サムネイルの親をpではなくaタグにして、大きい画像にリンクを張ることも出来ます。
クリックした時とかに点線が付いてしまうため、デモでは上２つ以外はリンクを張っていません。その辺はお好みでどうぞ。

Class Options

オプション名（タイプ）：デフォルト値　です。

infoClass (string) : “.info”
スライドさせる要素のクラス
thumbClass (string) : “.thumb”
サムネイル画像の親クラス
thubKey (string) : “_thumb”
サムネイル判別キー。サムネイル画像の名前を filename_thumb.png　としてください。
thumbDration (number/string) : 700
サムネイル画像モーフィングの遅延
infoDration (number/string) : 800,
情報をスライドさせるときの遅延
winDration (number/string) : 500
ページをスクロールさせるときの遅延
tumbTransition (object) : Fx.Transitions.Back.easeOut
サムネイル画像モーフィングのトランジション
infoTransition (object) : Fx.Transitions.Expo.easeOut
情報をスライドさせるときのトランジション
winTransition (object) : Fx.Transitions.Cubic.easeInOut
ページをスクロールさせるときのトランジション
offset (number) : 10
ページをスクロールして静止した際の窓上部からの位置。
reducing (bool) : false
開いている画像をクリックした際に縮小するかどうか。falseにするとクリックしても閉じなくなります
onStart (function) : $empty,
クリック後、オープンが始まった時に実行する関数
onComplete (function) : $empty,
クリック後、オープンが終わった時に実行する関数
onCloseStart (function) : $empty,
クローズが始まった時に実行する関数
onCloseComplete (function) : $empty
クローズが終わった時に実行する関数

遅延（Dration）は数字を大きくする程遅くなります。
文字列の場合はsort、normal、longの３つが使えます。

‘short’ – 250ms
‘normal’ – 500ms
‘long’ – 1000ms

トランジションについてはこちらのドキュメントにあるものが使えます。

Option Syntax:

第一引数でＩＤを指定した後に、第二引数で変更するものを指定します。

new mooContreGallery("gallery", {thumbClass:".thumbnail", offset:0 });

StartとCompleteイベントの各オプションは、指定した関数に引数でクリックした要素そのものとインデックス番号が渡されます。

onStart:function(element, index)

それを利用して色々な効果をつけることが可能です。
デモページではクリックした時に枠線が表示されるようにしています。

<script type="text/javascript">
//<!&#91;CDATA&#91;
window.addEvent("domready",function(){ 
	new mooContreGallery("gallery",{
 		onStart:function(el){ el.setStyle("border","solid 1px #005599") },
 		onComplete:function(el){ el.setStyles({"border":"none"}) }
	});
});
//&#93;&#93;>
</script>

Download

“mooContreGallery” をダウンロード

moocontregallery_v1-1.zip – 1543 回のダウンロード – 399.70 KB

Change Log

2009-12-17 v1.1 オプションinfoClassで取得する要素の使ってない初期格納削除
2009-11-13 公開（ver1.0）