(X)HTMLタグの設定

それでは実際にPhoto Sliderを使ってみます。ここでは実画像をphotoフォルダに、サムネイル画像をthumbフォルダに入れてあります。Photo SliderはjQueryライブラリを使用していますので以下の順番で読み込ませる必要があります。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/photoslider.js"></script>

Photo Sliderを使う場合にはスタイルシートファイルも読み込ませる必要があります。このファイルはphotoslider.cssで以下のようにして読み込ませます。

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

次に(X)HTMLタグを設定します。Photo Sliderでは画像とサムネイル画像を表示する領域を<div>タグで指定します。<div>タグにはID名とphotosliderのスタイルシートクラス名を指定します。Photo Sliderは表示する画像をスクリプトで指定します。まず、画像がある基準のURLを変数FOTO.Slider.baseURLに指定します。現在のフォルダを基準にする場合にはFOTO.Slider.baseURL = "./"とします。FOTO.Slider.baseURLは必ず設定してください。設定しない場合には/articles/assets/slider/が基準URLになります。次にFOTO.Slider.bucketに表示先の<div>タグのID名と表示画像のURLなどを指定します。これは以下の書式になります。

FOTO.Slider.bucket = {
    "ID名" : {
        0 : { "thumb" : "サムネイル画像のURL", "main" : "実画像のURL" },
        1 : { "thumb" : "サムネイル画像のURL", "main" : "実画像のURL" },
                ：
                ：
    }
}

表示したい画像の数だけ番号を増やして追加していきます。表示する画像の設定が終わったらページ上に表示します。ページ上に表示するにはFOTO.Slider.reloadを使い、パラメータに表示先の<div>タグのID名を指定します。これでスライドが表示されます。ただ、実画像をプレロード(先読み)しておきたい場合には、FOTO.Slider.preloadImages()を指定しておく必要があります。FOTO.Slider.preloadImages()のパラメータには表示先の<div>タグのID名を指定します。実際のプログラムはサンプル01になります。サンプル01では5枚の画像をクリックで切り替えて表示することができます。

サンプル01の実行結果。ナビゲーション領域のサムネイル画像をクリックすると画像が切り替わる

Photo Sliderはデフォルトで表示する画像とナビゲーション領域の幅が固定されています。この幅を変更したい場合には以下のようにwidthとheightを使って指定します。.photoslider_mainが画像の表示領域、.photoslider_navがナビゲーション領域になります。

.photoslider_main {
    height:240px;
}
.photoslider_nav {
    width: 500px;
}

サンプル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/photoslider.css" type="text/css">
        <link rel="stylesheet" href="css/main.css" type="text/css">
        <title>Photo Sliderサンプル</title>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/photoslider.js"></script>
        <script type="text/javascript"><!--
            $(function(){
                FOTO.Slider.baseURL = "./";
                FOTO.Slider.bucket = {
                    "album" : {
                        0 : { "thumb" : "thumb/001.jpg", "main" : "photo/001.jpg" },
                        1 : { "thumb" : "thumb/002.jpg", "main" : "photo/002.jpg" },
                        2 : { "thumb" : "thumb/003.jpg", "main" : "photo/003.jpg" },
                        3 : { "thumb" : "thumb/004.jpg", "main" : "photo/004.jpg" },
                        4 : { "thumb" : "thumb/005.jpg", "main" : "photo/005.jpg" }
                    }
                }
                FOTO.Slider.reload("album");
                FOTO.Slider.preloadImages("album");
            });
        // --></script>
    </head>
    <body>
    <h1>Photo Sliderサンプル</h1>
        <div id="album" class="photoslider"></div>  
    </body>
</html>