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

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

使用方法
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」サンプル

sponsors

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

記事作成:
記事URL:

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