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

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

sponsors

使用方法

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行目で変更できます。

サンプル

sponsors

Javascriptサンプルページ一覧
skuare.net