slideViewerでは、番号の上にマウスカーソルを重ねた時にツールチップを表示できます。表示内容は<img>
タグのalt属性に記述されたものとなります。ツールチップの表示は以下のようにtoolTipオプションにtrueを指定します。
$(~).slideView({toolTip: true})
しかし、これだけではエラーとなり表示されません。というのもツールチップの表示には、「tooltip」という他のjQueryプラグインが必要なためです。tooltipプラグインはこのサイトから入手できます。
ページ最初の方にある「Download Tooltip plugin 1.1」のリンク文字をクリックするとダウンロードできます。ZIP形式で圧縮されているので解凍します。
ここで必要になるのはスタイルシートファイル「jquery.tooltip.css」、スクリプトファイル「jquery.dimensions.js」と「jquery.tooltip.js」です(画面写真参照)。
これらを<link>
タグと<script>
タグとを使って以下のように読み込ませます。
<link rel="stylesheet" href="css/jquery.tooltip.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.2.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.js"></script>
<script type="text/javascript" src="js/jquery.tooltip.js"></script>
<script type="text/javascript" src="js/jquery.slideviewer.1.1.js"></script>
これでオプションにtoolTip: trueが指定されていれば、画像番号の上にマウスカーソルが重なった時にキャプションが表示されます。
サンプル03
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="css/slideviewer.css" type="text/css">
<link rel="stylesheet" href="css/jquery.tooltip.css" type="text/css">
<link rel="stylesheet" href="css/main.css" type="text/css">
<title>slideViewerサンプル</title>
<script type="text/javascript" src="js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.2.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.js"></script>
<script type="text/javascript" src="js/jquery.tooltip.js"></script>
<script type="text/javascript" src="js/jquery.slideviewer.1.1.js"></script>
<script type="text/javascript"><!--
$(function(){
$("#album").slideView({
toolTip: true
});
});
// --></script>
</head>
<body>
<h1>slideViewerサンプル</h1>
<div id="album" class="svw">
<ul>
<li><img src="photo/001.jpg" width="384" height="216" alt="富士山"></li>
<li><img src="photo/002.jpg" width="384" height="216" alt="夕焼け"></li>
<li><img src="photo/003.jpg" width="384" height="216" alt="富山湾"></li>
<li><img src="photo/004.jpg" width="384" height="216" alt="白糸の滝"></li>
<li><img src="photo/005.jpg" width="384" height="216" alt="高原の朝"></li>
</ul>
</div>
</body>
</html>