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

画像とキャプションをスムーズに表示するギャラリーJavaScript「s3Slider」

｜ ｜ ｜ ｜ ｜ ｜ ｜

LightBoxが巷にあふれる中、画像をより良く見せたい欲求は高まっていることでしょう。
s3Sliderでは、JavaScriptライブラリ「jQuery」を使用し、画像・キャプションにエフェクトをつけ、閲覧者の興味を喚起する仕組みを提供します。

使用方法
s3Sliderから、ファイル一式をダウンロードできます。
サンプルもついてくるので、基本的にはそれを見ればわかると思います。
以下のように書くことで可能です。
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="s3Slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 5000
});
});
</script>

また、CSSを記述します。
#slider {
width: 410px; /* important to be same as image width */
height: 300px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}
#sliderContent {
width: 410px; /* important to be same as image width or wider */
position: absolute;
top: 0;
margin-left: 0;
}
.sliderImage {
float: left;
position: relative;
display: none;
}
.sliderImage span {
position: absolute;
padding: 10px 13px;
width: 384px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
.clear {clear: both;}
.top {top: 0;left: 0;}
ul { list-style-type: none;}

最後に画像とキャプションを書き込みます。
<div id="slider">
<!--ここから1画像-->
<ul id="sliderContent">
<li class="sliderImage">
<a href=""><img src="画像パス" /></a>
<span class="top">キャプションテキスト</span>
</li>
<!--ここまで1画像-->
上記画像分繰り返し
<div class="clear sliderImage"></div>
</ul>
</div>

画像とキャプションをスムーズに表示するギャラリーJavaScript「s3Slider」サンプル

記事作成：2009年01月15日

前の記事：別コンテンツをスライド表示するJavaScript「Page Slide」
次の記事：インライン型LightBoxを実現するJavaScript「jQuery.popeye」