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

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

使用方法
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">
// var mf;
window.addEvent('load', function(){
mf = new MooFlow({
container: 'MooFlow',
imgContainer: 'images',
images: '#images img',
caption: 'captions'
});
});
//]]>
</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>
Appleぽい画像ギャラリーjavascript「MooFlow」サンプル

2007年12月06日

前の記事：カラフルな電光掲示板を作成するjavascript「led scroller」
次の記事：jQueryベースでクールなグラフを作成するjavascript「Flot」

関連記事

• [mootools]SimpleViewGallery
• [mootools]Slide Show
• [mootools]MooPiX
• [mootools]Imago
• Windows Vistaライクな画像ギャラリーjavascript「ImageFlip」

• jQueryでLightBoxを実現するjavascript「jQuery Lightbox Plugin (balupton edition)」
• ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」
• BOMBERMAN JAVASCRIPT GAME by mootools.js
• 3ステップで表をソート＆値を検索できるjavascript「dataTables」
• Movable Type 4.2にバージョンアップ
• ページの目次を自動で作成するjavascript「jqTOC」
• JavaScriptライブラリ「raphael」で図を描く
• ニューデザイン
• Widgetboxで手軽にRSS型ウィジェット（ガジェット）を作る
• 奥から手前にズームするJavaScript「Spacegallery.js」