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

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

sponsors

「Appleぽい画像ギャラリーjavascript「MooFlow」」をシェアする

記事作成:
記事URL:

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