MooFlow

概要

MooFlow は、iTunes の CoverFlow のように、画像をスライド式に表示するための JavaScript ライブラリです。
mootools を使用しますが、必要なファイルさえ用意してしまえば、設置は非常に簡単です。

インストール

公式サイトから以下をダウンロードします。

・MooFlow.js
・MooFlow.css
・skinの各ファイル

これ以外に以下が必要です。
これらは別途取得する必要があるのですが、バージョンによる互換性がかなりシビアなようなので、私は公式サイトで利用しているファイルをそのまま取得しました。

・mootools-1.2-core.js
・mootools-1.2-more.js

使用方法

まずは head タグ内にスタイルシートファイル、JavaScript ファイルを指定します。

 <link rel="stylesheet" type="text/css" href="MooFlow.css" />
 <script type="text/javascript" src="mootools-1.2-core.js"></script>
 <script type="text/javascript" src="mootools-1.2-more.js"></script>
 <script type="text/javascript" src="MooFlow.js"></script>

さらに、スタートアップ用の JavaScript を記述します。
この MooFlow のコンストラクタの中で、背景色等々様々な指定をすることができます。

 <script type="text/javascript">
 var myMooFlowPage = {
 

start: function(){
var mf = new MooFlow($('MooFlow'), {
useSlider: true,
useCaption: true,
useMouseWheel: true,
useKeyInput: true,
useViewer: true,
});
}

 };
 window.addEvent('domready', myMooFlowPage.start);
 </script>

そして、body タグ内に id=MooFlow な div タグを作成し、その中で以下のように表示する画像を記述すればＯＫです。
title を指定すれば、キャプションとして表示されたりします。

 <div id="MooFlow">
    <img src="xxx1" />
    <img src="xxx2" />
    <img src="xxx3" />
    <img src="xxx4" />
    <img src="xxx5" />
    <img src="xxx6" />
  </div>

MooFlow は多くのオプションがあり、応用が利くようになっていますので、詳しくは公式サイトを参照してください。

ご参考までですが、以下サンプルです。
サンプル：MooFlow

prototype との共存

MooFlow は、mootools をベースとして使用していますが、この mootools と prototype は共存に問題があるそうです。
このため、prototype と MooFlow を共存することは、残念ながら簡単ではないようです。
もし、簡単に共存できるようであれば、是非ご一報を(/_＼*)