ページめくり風の画像ギャラリーを作成するjavascript「jqShuffle」

｜ ｜ ｜ ｜ ｜ ｜

LightBoxの登場にインパクトがあったからか画像の表示方法がワンパターン化している気がします。
今回紹介するjqShuffleでは、画像を1枚1枚めくるようなギャラリーを作成することができます。
Flashではありそうですが、Javascriptでは一風味変わった表示方法です。

使用方法
jqShuffleからjqshuffle.jsを、JavascriptライブラリのjQueryからjquery.jsをダウンロードします。
<script src="http://yourdomain/jquery.js" type="text/javascript"></script>
<script src="http://yourdomain/jqshuffle" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.class名').jqShuffle();
});
</script>
上記のスクリプトをhead内に書き込んだ後は、HTMLで表示したい画像を以下のように書き込めば完成です。
<ul class="class名">
<li><span><img src="画像URI"></span></li>
<li><span><img src="画像URI"></span></li>
<!-- 表示したい画像分 -->
</ul>
なおスピードや横の移動距離などのオプションはjsファイルの70行目で変更可能です。
ページめくり風の画像ギャラリーを作成するjavascript「jqShuffle」サンプル

2007年08月26日

前の記事：フォントの種類を変更するjavascript「Selector.js」
次の記事：フォームに吹き出しでヒントを出すjavascript「Hints.js」

関連記事

• jQueryプラグイン「pikachoose」で小気味良いスライドショーを作る
• jQueryでファンシーなLightBoxクローンを作る「Fancy Zoom」
• 奥から手前にズームするJavaScript「Spacegallery.js」
• [jQuery]Galleria
• [jQuery]ScrollShow

• チラ見せしちゃうJavaScript「Page Peel」
• 入力内容の絞込みを行うJavaScript「Live Filter」
• JavaScriptライブラリ「jQuery」で、いい動きのスライダーを作る「Start/Stop Slider」
• お手軽にタブ切り替えを行うJavaScript「Spotlight」
• 2008年アクセスランキング
• jQueryプラグイン「pikachoose」で小気味良いスライドショーを作る
• jQueryで画像に反射効果を！「Reflection.js for jQuery」
• jQueryでニュースティッカーを作成するJavaScript「JqNews」
• JavaScriptライブラリ「jQuery」でカレンダーを表示する「dynDateTime」
• 画像のキャプションをクールに表示するJavaScript「jQuery Captify Plugin」