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

スライドの切り替えが印象的なjQueryの画像ギャラリー「Sliced Image Slider」

｜ ｜ ｜ ｜ ｜ ｜ ｜

画像ギャラリーの切り替えはフェードや横からのスライドなどいろいろあります。
JavaSCriptライブラリjQueryプラグインの「Sliced Image Slider」を使用すると、スライスされた画像が上下左右から現れるようなエフェクトが可能です。

使用方法
Sliced Image Sliderからファイル一式をダウンロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.slices.js"></script>
<script>
$(document).ready(function() {
$("#id名").slicer();
});
</script>

あとは上記id内に画像を記述すれば完成です。
<div id="id名">
<ul>
<li><img src="画像パス1" /></li>
<li><img src="画像パス2" /></li>
<li><img src="画像パス3" /></li>
</ul>
</div>

また表示する画像の幅高さに応じて以下のようにCSSを記述します。
<style>
#id名{
height:265px; //画像の高さ
width:500px; //画像の幅
overflow:hidden;
position:relative;
}
#id名 ul{
margin:0;
padding:0;
}
#id名 ul li{
float:left;
list-style-type:none;
margin:0;
padding:0;
}
img {
border:none;
margin:0;
padding:0;
}
</style>

またオプションは以下のようなものがあります。

$("#id名").slicer({
direction: 'topDown', //移動方向 bottomUp,leftRight,rightLeft
duration: 1000, //スライド移動時間
sliceDelay: 100, //スライス移動時間
removeSliceDirection: 'bottomUp', //スライス削除方向
numberOfSlices: 10 //スライス枚数
});

スライドの切り替えが印象的なjQueryの画像ギャラリー「Sliced Image Slider」サンプル

記事作成：2009年09月28日

前の記事：jQueryでParallax「Scrolling Parallax Plugin for jQuery」
次の記事：jQueryでフォントサイズを簡易的に切り替える　via：jQuery Font Resize Demo