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><amp-img src="画像パス1" title="キャプション1" /></li>
<li><amp-img src="画像パス2" title="キャプション2" /></li>
<li><amp-img src="画像パス3" title="キャプション3" /></li>
<!-- 以下画像分 -->
</ul>
appleライクなカバーフロー画像ギャラリー「FlowGallery jQuery Plugin」サンプル
sponsors
記事作成:2011年2月16日 10:02
記事URL:http://www.skuare.net/2011/02/appleflowgallery_jquery_plugin.html
TOP > javascript > 画像関連 > appleライクなカバーフロー画像ギャラリー「FlowGallery jQuery Plugin」
前の記事:広告の表示を遅くして目立たせるjQueryプラグイン「jQuery LazyLoad Ad」
次の記事:マウスオーバーでテキストが印象的に!「Letter Scroll Plugin」
あなたにはこちもお勧め!
jQuery プラグインまとめ!