skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

JavaScriptで画像ギャラリーを作る「jQuery slideShow plugin」

｜ ｜ ｜ ｜ ｜ ｜ ｜

画像ギャラリーはサイト制作の中でも多く利用するのではないでしょうか。
そのため選択肢の幅を広げ、よりサイトにあったJavaScriptを使うことをお勧めします。
今回はjQuery slideShow pluginを紹介します。

使用方法
jQuery slideShow pluginからファイル一式をダウンロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.slideshow.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#id名').slideShow({
interval: 3,
slideClick: function(slideShow) {
if (slideShow.mouse.x > slideShow.options.slideSize.width / 2) {
slideShow.next();
} else {
slideShow.previous();
}
}
});
});
</script>

上記を記述したら後は画像部分を以下のように記述すれば完成です。
<div class="slideShow">
<ul class="slides">
<li class="slide"><img src="1.jpg" border="0" alt="" /></li>
<li class="slide"><img src="2.jpg" border="0" alt="" /></li>
<li class="slide"><img src="3.jpg" border="0" alt="" /></li>
<li class="slide"><img src="4.jpg" border="0" alt="" /></li>
<li class="slide"><img src="5.jpg" border="0" alt="" /></li>
</ul>
<!-- ここからナビゲーション -->
<ul class="navigation">
<li><a href="javascript:void(0);" class="first">first</a></li>
<li><a href="javascript:void(0);" class="prev">prev</a></li>
<li><a href="javascript:void(0);" class="page">1</a></li>
<li><a href="javascript:void(0);" class="page">2</a></li>
<li><a href="javascript:void(0);" class="page">3</a></li>
<li><a href="javascript:void(0);" class="page">4</a></li>
<li><a href="javascript:void(0);" class="page">5</a></li>
<li><a href="javascript:void(0);" class="next">next</a></li>
<li><a href="javascript:void(0);" class="last">last</a></li>
</ul>
</div>

自動でナビを出してくれないのが、難点ですがUI的にはわりと優れているので、画像数が少なめの際は有意義かもしれません。
JavaScriptで画像ギャラリーを作る「jQuery slideShow plugin」サンプル

記事作成：2009年07月07日

前の記事：twitterの現状とマーケティング利用について考えてみたよ。
次の記事：アイデア勝ち！JavaScriptでビフォーアフター「jQuery Before/After Plugin」