Home > CSS | MooTools > [MooTools] mooContreGallery Plugin

[MooTools] mooContreGallery Plugin

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


moocontregallery demo
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タグで読み込ませます。

PLAIN TEXT
JavaScript:
  1. <script src="js/mootools-1.2.4-core.js" type="text/javascript"></script>
  2. <script src="js/mootools-1.2.4-more.js" type="text/javascript"></script>
  3. <script src="js/mooContreGallery.js" type="text/javascript"></script>

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

PLAIN TEXT
JavaScript:
  1. <script type="text/javascript">
  2. //<![CDATA[
  3. window.addEvent("domready",function(){
  4.     new mooContreGallery("gallery");
  5. });
  6. //]]>
  7. </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ソースの例

PLAIN TEXT
HTML:
  1. <ul id="gallery"><!--ID指定するギャラリー-->
  2.     <li><!--ギャラリーの子要素（自動取得）-->
  3.     <p class="thumb"><img src="images/cat1_thumb.jpg" alt="cat1" width="100" height="68" title="cat1" />
  4.         <!--サムネイル画像とそれを入れる要素。クラス名必須-->
  5.     </p>
  6.     <div class="info">
  7.         <!--スライドされる説明要素。クラス名必須-->
  8.     </div>
  9.     </li>
  10. </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:

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

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

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

PLAIN TEXT
JavaScript:
  1. onStart:function(element, index)

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

PLAIN TEXT
JavaScript:
  1. <script type="text/javascript">
  2. //<![CDATA[
  3. window.addEvent("domready",function(){
  4.     new mooContreGallery("gallery",{
  5.        onStart:function(el){ el.setStyle("border","solid 1px #005599") },
  6.        onComplete:function(el){ el.setStyles({"border":"none"}) }
  7.     });
  8. });
  9. //]]>
  10. </script>

Download

mooContreGallery (v1.1)

Change Log

  • 2009-12-17 v1.1 オプションinfoClassで取得する要素の使ってない初期格納削除
  • 2009-11-13 公開（ver1.0）
このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl（バザール）に追加このエントリをChoixに追加このエントリをnewsingに追加

Comments:7

HM 10-03-05 (金) 22:25

はじめまして，HMと申します．いつもこちらのサイトを参考にいろいろと勉強させてもらいっています．早速ですがこのプラグインを私のサイトで使用してもかまわないでしょうか？よろしくお願いします．

Tenderfeel 10-03-05 (金) 22:34

HM さん＞
MITライセンスなので著作権表示さえ削除しなければ煮ても焼いても自由です。
特にオリジナル製作者である偉大なcontreforme sàrlの著作権表示は絶対消さないでください。

HM 10-03-06 (土) 1:20

すばやい回答をしていただきありがとうございます．MITライセンスは理解しています．しかしこちらのサイトを通じこのプラグインを知ることができ，さらにTenderfeelさんのご苦労とオリジナリティがあると思い許可を取らせていただきました．
今後ともいろいろと勉強させていただくと思います．よろしくお願いします．

Tenderfeel 10-03-06 (土) 2:00

HM さん＞
ご丁寧にありがとうございます。
どちらかというと使用許可よりも、使用後に見つかったバグとか改善案とか質問などを頂けると嬉しいです。
あとcontreforme sàrlのソースを書き直しただけなので苦労はしてません（笑）
勉強頑張ってくださいね。

HM 10-03-10 (水) 20:12

こんばんは，一点だけお聞きしてもよろしいでしょうか．
クリックした後に表れるの中に<a>タグを使用すると，リンクそのものは表示されますがクリックしても動作しません(そのリンクを右クリックして新しいタブで開く等すれば動作します)．これは仕様なのでしょうか．もしinfoClass内で<a>タグを動作させるためにはどのようにしたらいいのでしょうか？
元ネタのサイトを参考に自分なりに試行錯誤しました．しかしうまくいきませんでした．お時間のあるときに回答をお願いいたします．

Tenderfeel 10-03-10 (水) 20:39

HM　さん＞
リスト要素全体をクリック対象にするための仕様です。

未圧縮のソース111行目にあるe.stop();をコメントアウトすると
ギャラリーLI要素内のアンカーリンクが全て有効になります。
ただし画像にリンクを張っている場合はそちらも反応するようになるので、
それは制御しつつinfoクラス内のみ有効にしたいという事であればロジックを追加する必要があります。

initializeの$each内に：


el.getElement(self.options.infoClass).getChildren("a").addEvent("click",function(e){
	e.stop();
	location.href = this.href;
	//window.open(this.href);
});
HM 10-03-10 (水) 23:48

早速ご教授いただいたとおりにe.stop();をコメントアウトしたところ，うまく動作させることができました．本当にありがとうございます．

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://tenderfeel.xsrv.jp/css/658/trackback/
Listed below are links to weblogs that reference
[MooTools] mooContreGallery Plugin from WebTecNote

Home > CSS | MooTools > [MooTools] mooContreGallery Plugin

Scripts
カテゴリー
Recent Reactions
最近の投稿
最近の修正
  • そしてこのSQLはわれながらよく書いたと思う 2010-11-15
  • CSVの列っていう方がいいのかな…118項目だった 2010-11-15
  • 楽天のCSVの項目が116個もあった衝撃 2010-11-15
  • オフィスで香水臭振りまくのは迷惑だと知れ 2010-11-15
  • ぐあー　フレグランステロやー 2010-11-15
  • More updates...

Powered by Twitter Tools

Tag Cloud
おすすめサーバー・他

メタ情報

Return to page top