それでは、実際にslideViewerを使ってみます。

slideViewerは、jQueryライブラリとjquery.easingライブラリ(プラグイン)を使用しています。slideViewerを使用するには、これら2つのライブラリとslideViewerライブラリを以下のように順番に読み込ませる必要があります。

<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.slideviewer.1.1.js"></script>

その後スタイルシートを<link>タグを使って読み込ませます。

<link rel="stylesheet" href="css/slideviewer.css" type="text/css">

(X)HTMLタグを設定

次に、(X)HTMLタグを設定します。slideViewerではスライドする画像の指定はリストタグ<ul>を使います。<li><img></li>を表示したい数だけ列記します。画像のキャプションを表示したい場合にはalt属性で指定しておきます。

slideViewerでは、この<ul>タグ全体を<div>タグで囲みます。<div>タグにはスタイルシートクラスのsvw、また同時にID名を指定しておきます。最終的に、以下のような構造になります。

<div id="ID名" class="svw">
        <ul>
            <li><img src="画像のURL" width="横幅" height="縦幅" alt="キャプション"></li>
                ：
                ：
        </ul>
</div>

スライド処理を機能させる

サンプル01の実行結果

ここまででは、スライド処理は機能しません。ページの読み込みが完了したらスライド処理が機能するようにしなければなりません。

スライド処理が機能するようにするには、機能させたい領域に対してslideView()メソッドを実行します。サンプル01ではID名がalbumの<div>タグ内の画像をスライド表示させています。

画像の下にある番号をクリックすると、画像がスライドして表示されます

サンプル01

<!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/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.slideviewer.1.1.js"></script>
        <script type="text/javascript"><!--
            $(function(){
                $("#album").slideView();
            });
        // --></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>