Windows Vistaライクな画像ギャラリーjavascript「ImageFlip」
2007
12/28
最近の画像ギャラリーの進化ぶりには目を見張るものがあります。
ImageFlipはWindows Vistaからヒントを得て作られたjavascriptの画像ギャラリーです。
使用方法
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」サンプル
｜
｜
｜
｜
｜
｜
前の記事：画像も角丸にするjavascript「roundedcorners」
次の記事：MyMiniCityへのアクセスを増やす方法
コメント投稿
Windows Vistaライクな画像ギャラリーjavascript「ImageFlip」に関するコメントはまだありません。
ご遠慮なくコメントしてください。
この記事へのトラックバック:
トラックバック一覧
