[SlideShowライブラリ] 画像をフェードイン/アウトさせながらスライド表示する

説明

SlideShowライブラリで画像をフェードイン/アウトさせながらスライド表示するには、画像を表示するためのコンテナをdivタグで用意しID名をgalleryにします。その中にキャプションを表示するために<div class="caption"><div class="content"></div></div>と指定します。これがないとキャプションが表示されません(キャプションを表示したくない場合は、これらのタグを書かなければよい)。
divタグ内に表示したい画像をaタグで囲みます。最初に表示したい画像にはaタグにclass="show"を指定しておきます。画像のキャプションはimgタグのrel属性に指定しておきます。
SlideShowライブラリは他のjQueryプラグインではなくjQueryを利用したライブラリなのででslideShow、galleryという名前のグローバル関数が定義されています。このため、これらの関数と同名のものを使用すると正しく動作しません。また、切り替え速度などもオプションで指定できないため、ライブラリファイル内のパラメータを変更する必要があります。

サンプルプログラム

【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<link rel="stylesheet" href="css/slideshow.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-slideshow.js"></script>
<script type="text/javascript" src="js/sample.js"></script>
</head>
<body>
<h1>jQuery SlideShowサンプル</h1>
<div id="gallery">
<a href="#" class="show">
<img src="photo/1.jpg" width="580" height="360" rel="長野県松本市にある国宝 松本城です。">
</a>
<a href="#">
<img src="photo/2.jpg" width="580" height="360" rel="長野県の活火山の1つ、浅間山です。">
</a>
<a href="#">
<img src="photo/3.jpg" width="580" height="360" rel="高ボッチ高原の木々。霧の中で撮影したものです。">
</a>
<div class="caption"><div class="content"></div></div>
</div>
</body>
</html>


【sample.js】
$(function(){
slideShow();
});
サンプルを実行
[戻る]