Windows Vistaライクな画像ギャラリーjavascript「ImageFlip」

最近の画像ギャラリーの進化ぶりには目を見張るものがあります。
ImageFlipはWindows Vistaからヒントを得て作られたjavascriptの画像ギャラリーです。
mooImageFlip

使用方法
ImageFlipからimageflip-0.1.jsをmootoolsからmootools.jsをダウンロードします。
<script type="text/javascript" src="http://yourdomain/mootools.js"></script>
<script type="text/javascript" src="http://yourdomain/imageflip-0.1.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
var properties = new Array();
properties['zIndex'] = 1;
properties['loadingText'] = 'Loading...'; //ローディングテキスト
var images = new Array(
'画像パス', //画像分(5枚以上)
'画像パス',
'画像パス'
);
var flipper = new ImageFlip(
new Array('dis0', 'dis1', 'dis2', 'dis3', 'dis4'),
new Array('d0', 'd1', 'd2', 'd3', 'd4'),
new Array('next', 'previous'),
images,
properties);
});
</script>

上記を記述したら以下を記入します。
<div id="demo0" class="d0"></div>
<div id="dis1" class="d1"></div>
<div id="dis2" class="d2"></div>
<div id="dis3" class="d3"></div>
<div id="dis4" class="d4"></div>
<a href="#" id="previous">前</a> <a href="#" id="next">後</a>

また表示する場所はCSSで指定します。
<style type="text/css">
.d0 {background-color: #888;width: 200px;height: 160px;position: absolute;left: 10px;top: 90px;}
.d1 {background-color: #777;width: 250px;height: 200px;position: absolute;left: 60px;top: 70px;}
.d2 {background-color: #666;width: 300px;height: 240px;position: absolute;left: 110px;top: 50px;}
.d3 {background-color: #555;width: 350px;height: 280px;position: absolute;left: 160px;top: 30px;}
.d4 {background-color: #444;width: 400px;height: 320px;position: absolute;left: 210px;top: 10px;}
</style>

適宜変更してください。
*ローディング画像はimageflip-0.1.jsの116行目で変更できます。
Windows Vistaライクな画像ギャラリーjavascript「ImageFlip」サンプル

sponsors

「Windows Vistaライクな画像ギャラリーjavascript「ImageFlip」」をシェアする

記事作成:
記事URL:

TOP > > > Windows Vistaライクな画像ギャラリーjavascript「ImageFlip」