appleライクなカバーフロー画像ギャラリー「FlowGallery jQuery Plugin」

カバーフローというappleでよく使われるUIがあります。
見ているものを目立たせ、かつほかに何があるかわかりやすいものです。
これを簡単に実現できるjQueryプラグイン「FlowGallery jQuery Plugin」を紹介します。

sponsors

使用方法

FlowGallery jQuery Pluginからファイル一式をダウンロード。
下記のように記述します。

<script src="jquery-1.4.4.min.js" type="text/javascript"></script>	
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script src="jquery.flowgallery.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
	$('#id名').flowGallery({
		activeIndex: 2, //最初に表示する画像(1枚目は0)
		easing: 'easeOutCubic', //easingプラグイン 
		backgroundColor: 'red', //背景色(画像枠になります)
		thumbWidth: 140,  // サムネイル幅:必須(auto不可)
		thumbHeight: '50', //サムネイル高さ
		imagePadding: 6 //画像の余白
	});
});
</script>
あとは上記idで画像をくくれば完成です。

<ul id="id名">
	<li><img src="画像パス1" title="キャプション1" /></li>
	<li><img src="画像パス2" title="キャプション2" /></li>
	<li><img src="画像パス3" title="キャプション3" /></li>
	<!-- 以下画像分 -->
</ul>

サンプル


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

sponsors