【jQuery】トランプをシャッフルするように画像をめくって切り替えれるギャラリー

画像をクリックするとトランプのカードをシャッフルする時のように画像を入れ替えます。ちょっと変わった画像の切り替えをしたい時にいいと思います。iPhone、iPadでも動作します。

デモ

動きの説明はいつも難しいですが、見てもらうと一目瞭然だと思います。

デモページ

Javascript

jQuery依存なので、まずHTML上でjQueryを読み込みます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

プラグインjqshuffle.jsをサーバにアップして読み込みます。

<script type="text/javascript" src="js/jqshuffle.js"></script>

そして下のJavascriptを記載します。

<script type="text/javascript">
$(document).ready(function(){
$('.jqshuffle').jqShuffle();
});
</script>

HTML

HTMLはclass=”jqshuffle”を付けたulのリストに画像を入れるだけです。

<ul class="jqshuffle">
<li><img src="img/01.jpg" width="300" height="300" alt=""></li>
<li><img src="img/02.jpg" width="300" height="300" alt=""></li>
<li><img src="img/03.jpg" width="300" height="300" alt=""></li>
<li><img src="img/04.jpg" width="300" height="300" alt=""></li>
<li><img src="img/05.jpg" width="300" height="300" alt=""></li>
</ul>

クリックで次の画像を表示し続けるだけなので、一つ前に見た画像に戻るにはクリックし続けなければいけないのが、使い所を選ぶ点だと思います。