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

画像ギャラリーはサイト制作の中でも多く利用するのではないでしょうか。
そのため選択肢の幅を広げ、よりサイトにあった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」サンプル

sponsors

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

記事作成:
記事URL:

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