Tweet｜ ｜ ｜ ｜

[ 2分で読めて簡単導入できます]

画像ギャラリーの切り替えはフェードや横からのスライドなどいろいろあります。
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日