[MooTools] mooZoomGallery Plugin

by

mooZoomGalleryはサムネイル画像から拡大画像への表示を、画像が並んでいるエリア内で行うMooTools用ギャラリープラグインです。
LightBoxのようにレイヤーを被せて表示するのではなく、他のサムネイルを非表示にする事で画像を表示する場所を確保します。
……なんかこの動きどこかで見たような気がしなくもないですが、
このプラグインは全て同じサイズのサムネイル画像を並べたレイアウトに特化しています。

View DEMO
View Demo

使い方

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

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

その後More Builderのページに飛んで、Fx.Scrollと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/mooZoomGallery.js" type="text/javascript"></script>

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

<script type="text/javascript">
//<![CDATA[
window.addEvent("domready",function(){ 
	new mooZoomGallery("gallery");
});
//]]>
</script>

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

(X)HTML & CSS Styling

元々このクラスがmooContreGalleryの派生なので、(X)HTMLに関しては同じ構造でOKなのですが、
まとめると以下のような条件があります。

  • サムネイル画像は全て同じサイズにする
  • 拡大画像はサムネイルが並んでいるエリアの幅よりも横幅を小さくする(※1)
  • サムネイルが並んでいるエリアの高さをCSSで指定する(※2)
  • サムネイル画像を入れる要素(class=”thumb”)とサムネイル画像(img tag)、説明の要素(class=”info”)は必須
  • サムネイル画像のファイル名は、判別キーを拡張子前に含める
    （デフォルトでは_thumbなのでcat1_thumb.jpgなどとする）
  • サムネイル画像を入れている要素(class=”thumb”)はbackgroundでローディング画像を上下中央に表示させる

※１：大きくても拡大も表示もされますが、floatのクリア目的でoverflow:hiddenをしているとはみ出た部分が表示されません。
※２：高さ指定が無い場合は自動で取得しますが、プラスの誤差が生じます。

(X)HTMLソースの例

<ul id="gallery"><!--ID指定するギャラリー-->
	<li><!--ギャラリーの子要素（自動取得）-->
		<a href="images/01.jpg" class="thumb"><!--サムネイル画像とそれを入れる要素。クラス名必須-->
			<img src="images/01_thumb.jpg" alt="" width="150" height="150" />
		</a>
		<div class="info">Image:01</div><!--フェードで表示される説明要素。クラス名必須-->
	</li>
</ul>

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

拡大画像のSRCはサムネイルから取得するので画像にリンクを張らなくてもサムネイル画像さえあれば動作します。
リンクを張るとクリックした時とかに点線が付いてしまうため、デモではoutline: noneにしています。
IE7以下は非対応なので、その辺はお好みでどうぞ。

Class Options

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

  • infoClass (string) : “.info”
    画像の情報要素のクラス（フェード表示）
  • thumbClass (string) : “.thumb”
    サムネイル画像の親クラス
  • thubKey (string) : “_thumb”
    サムネイル判別キー。サムネイル画像の名前を filename_thumb.png　としてください。
  • thumbWidth (number) : 150
    サムネイルの初期横幅。ピクセル単位
  • thumbHeight (number) : 150
    サムネイルの初期高さ。ピクセル単位
  • thumbDration (number/string) : 700
    サムネイル画像モーフィングの遅延
  • infoDration (number/string) : 800,
    情報をスライドさせるときの遅延
  • winDration (number/string) : 500
    ページをスクロールさせるときの遅延
  • moveDration (number/string) : 500
    画像を移動させるときの遅延
  • tumbTransition (object) : Fx.Transitions.Back.easeOut
    サムネイル画像モーフィングのトランジション
  • infoTransition (object) : Fx.Transitions.Expo.easeOut
    情報をスライドさせるときのトランジション
  • winTransition (object) : Fx.Transitions.Cubic.easeInOut
    ページをスクロールさせるときのトランジション
  • moveTransition (object) : Fx.Transitions.linear
    画像を移動させるときのトランジション
  • 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 mooZoomGallery("gallery", {thumbClass:".thumbnail", offset:0 });

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

onStart:function(element, index)

それを利用して色々な効果をつけることが可能です。
クリックした時に枠線が表示されるようにする場合は次のようになります。

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

Download

“mooZoomGallery” をダウンロード

moozoomgallery.zip – 1377 回のダウンロード – 565.15 KB

Change Log

  • 2009-11-16 公開（ver1.0）

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。