Appleぽい画像ギャラリーjavascript「MooFlow」

AppleのiTunesやCoverFlowで使用されているギャラリーに影響を受けたjavascriptです。
画像が多くなると滑らかではないですが、正直こんなのが欲しかったと思うスクリプトです。
その名も、MooFlowです。

sponsors

使用方法

MooFlowからダウンロードしたMooFlow.jsとmootools-beta-1.2b1.jsを以下のように記述します。
<script type="text/javascript" src="http://yourdomain/mootools-beta-1.2b1.js"></script>
<script type="text/javascript" src="http://yourdomain/MooFlow.js"></script>
さらに下記のJavaScriptとCSSを記載します。
<script type="text/javascript">
//
</script>
<style type="text/css">
body{padding:0; margin:0; background:#000; color:#fff;}
#MooFlow {background-color:#000;color:#fff;visibility:hidden;position:relative;overflow:hidden;}
#MooFlow * {margin:0;padding:0;}
#images {position:relative;}
#images img {position:absolute;border:none;}
#captions {position:relative;text-align:center;z-index:10000;}
</style>
最後にギャラリーを表示する用するHTMLを記述します。
<div id="MooFlow">
<div id="images">
<img src="画像パス" alt="<キャプション>" />
</div>
<div id="captions"></div>
</div>

sponsors

サンプル

当メインブログskuare.netにて使用している画像をMovable Typeで書き出して適用させたものです。
skuare.net : 画像一覧

オプション

slider: {slider:'slider',knob:'knob'},  //スライダー
interval: 1000,	//スライドショー間隔
buttons: {prev:'prev',stop:'stop',play:'play',next:'next'}, //ボタン
useMouseWheel: true,	//マウスウィール
startIndex: 3	//画像開始場所
スライダーなどを適用するためには、さらに以下を最後のdiv前に追加します。
<div id="slider">
<div id="knob"></div>
</div>
<ul id="nav">
<li><a href="#" id="prev">Prev</a></li>
<li><a href="#" id="stop">Stop</a></li>
<li><a href="#" id="play">Play</a></li>
<li><a href="#" id="next">Next</a></li>
</ul>
また、CSSで見た目の表示を変更することが出来ます。
#slider {position:relative;border:1px solid #b3b3b3;z-index:10001;}
#knob {background:#fff;width:100px;height:15px;}
#nav{list-style:none;margin:0;padding:0;position:relative;z-index:10002;text-align:center;}
#nav li{display:inline;}
#nav a{color:#fff;}
Javascriptサンプルページ一覧
skuare.net