フォトアルバムを表示する

サイドパネルにはリンクテキストだけでなく画像も表示することができます。ここでは、画像のサムネイルを表示しクリックされたら実画像を表示するサンプルを見てみましょう。画像は横4列、横2行で表示します。このため、デフォルトの表示サイズでは横幅が狭く期待通りに表示されません。そこで、サイドパネルの幅を変更します。サイドパネルで表示される領域のサイズはスタイルシート部分で指定します(*2)。widthとheightプロパティに表示サイズを指定します。サンプル02では横幅を400pxに設定しています。

#sideBarContents{
    float:left;
    overflow:hidden !important;
    width:400px;    ←■ココが全体の横幅
    height:170px;   ←■ココが全体の縦幅
    background-color:#363636;
}

#sideBarContentsInner{
    width:400px;    ←■ココが内容の横幅
}

サイドタブの画像はimagesフォルダにあるslide-button.gifファイルとslide-button-active.gifファイルを書き換えます。画像でなくテキストで表現することも可能です。

サンプル02の実行結果

サイドバーからフォトアルバムが現れる
*2 Script.aculo.us版の場合

サンプル02

<!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/main.css" type="text/css">
        <script type="text/javascript" src="js/prototype.js"></script>
        <script type="text/javascript" src="js/effects.js"></script>
        <script type="text/javascript" src="js/side-bar.js"></script>
        <title>Sliding JavaScript Side Barサンプル</title>
    </head>
    <body>
        <h1>Sliding JavaScript Side Barサンプル</h1>
        <div id="sideBar">
            <a href="#" id="sideBarTab"><img src="images/slide-button.gif" alt="sideBar" title="sideBar"></a>
            <div id="sideBarContents" style="display:none;">
                <div id="sideBarContentsInner">
                    <h2>日本の自然</h2>
                    <a href="photo/001.jpg"><img src="thumb/001.jpg"></a>
                    <a href="photo/002.jpg"><img src="thumb/002.jpg"></a>
                    <a href="photo/003.jpg"><img src="thumb/003.jpg"></a>
                    <a href="photo/004.jpg"><img src="thumb/004.jpg"></a><br>
                    <a href="photo/005.jpg"><img src="thumb/005.jpg"></a>
                    <a href="photo/006.jpg"><img src="thumb/006.jpg"></a>
                    <a href="photo/007.jpg"><img src="thumb/007.jpg"></a>
                    <a href="photo/008.jpg"><img src="thumb/008.jpg"></a><br>
                </div>
            </div>
        </div>
    </body>
</html>