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

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

sponsors

使用方法

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サンプルページ一覧
skuare.net

sponsors