【ハウツー】ゼロからはじめるLightbox 2.0 - 簡単にWebで写真アルバム機能を (6) 表示速度や枠幅を指定する | パソコン

急上昇ワード

[

]

【ハウツー】

ゼロからはじめるLightbox 2.0 - 簡単にWebで写真アルバム機能を

6 表示速度や枠幅を指定する

古籏一浩　 [2007/06/14]

印刷

先頭
前へ
- 1
- 2
- 3
- 4
- 5
- 6
- ／6

表示速度や枠幅を指定する

Lightbox 2.0では表示速度や背景の不透明度を設定することができます。設定が反映されないものもありますが、以下のパラメータを指定することができます。

変数名	初期値	内容
fileLoadingImage	images/loading.gif	読み込み中を示す画像URL
fileBottomNavCloseImage	images/closelabel.gif	CLOSEボタンの画像URL
overlayOpacity	0.8	背景の不透明度 (1で真っ黒)
animate	true	リサイズ時のアニメーション(true : アニメーションする、false : しない)
resizeSpeed	7	リサイズ時の速度(1 : 低速、10 : 高速)
borderSize	10	枠のサイズ(余白)

「透明度を変えて表示させたサンプル」

Lightbox 2.0では実画像が表示される領域は角が四角になっていますが、Firefoxではスタイルシートを設定することで角丸にすることができます。実画像が表示される領域は2つに分かれており、上の部分と下の部分で別個に角丸のスタイルシートを設定します。上の領域はID名outerImageContainer、下の領域はID名imageDataContainerになっており、それぞれ-moz-border-radiusを設定することで角丸表示にすることができます(サンプル10)。

#outerImageContainer {
        -moz-border-radius-topleft:10px;
        -moz-border-radius-topright:10px;
}
#imageDataContainer {
        -moz-border-radius-bottomleft:10px;
        -moz-border-radius-bottomright:10px;
}

「角丸で表示されたサンプル」

Lightbox 2.03.3はprototype.js ver 1.4をベースにしていますが、最新版である1.5.1でも動作します。この場合、prototype.jsライブラリだけでなく、script.aculo.usもバージョン1.7.1に差し替える必要があります。Lightboxは手軽で効果的な演出ができる便利なライブラリです。他にも似たようなスライド処理を行うライブラリがたくさんありますが、この機会に手軽なLightboxを使ってみてはどうでしょうか。

【サンプル09】

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8">
            <link rel="stylesheet" href="css/lightbox.css" type="text/css">
            <script type="text/javascript" src="js/prototype.js"></script>
            <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
            <script type="text/javascript" src="js/lightbox.js"></script>
            <script type="text/javascript"><!--
                overlayOpacity = 0.2;   // 背景の不透明度
                resizeSpeed = 1;        // リサイズ処理速度 (1:低速、10:高速)
                borderSize = 40;        // 枠サイズ（ピクセル）
            // --></script>
            <title>Lightboxサンプル</title>
        </head>
        <body>
        <h1>Lightbox 2.03.3サンプル</h1>
            <div>
                <a href="photo/001.jpg" rel="lightbox[nature]" title="富士山">
                    <img src="thumb/001.jpg" width="96" height="54" alt="富士山">
                </a>
                <a href="photo/002.jpg" rel="lightbox[nature]" title="夕焼け">
                    <img src="thumb/002.jpg" width="96" height="54" alt="夕焼け">
                </a>
                <a href="photo/003.jpg" rel="lightbox[nature]" title="富山湾">
                    <img src="thumb/003.jpg" width="96" height="54" alt="富山湾">
                </a>
            </div>
        </body>
</html>

【サンプル10】

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8">
            <link rel="stylesheet" href="css/lightbox.css" type="text/css">
            <script type="text/javascript" src="js/prototype.js"></script>
            <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
            <script type="text/javascript" src="js/lightbox.js"></script>
            <style type="text/css"><!--
            #outerImageContainer {
                -moz-border-radius-topleft:10px;
                -moz-border-radius-topright:10px;
            }
            #imageDataContainer {
                -moz-border-radius-bottomleft:10px;
                -moz-border-radius-bottomright:10px;
            }
            --></style>
            <title>Lightboxサンプル</title>
        </head>
        <body>
        <h1>Lightbox 2.03.3サンプル</h1>
            <div>
                <a href="photo/001.jpg" rel="lightbox[nature]" title="富士山">
                    <img src="thumb/001.jpg" width="96" height="54" alt="富士山">
                </a>
                <a href="photo/002.jpg" rel="lightbox[nature]" title="夕焼け">
                    <img src="thumb/002.jpg" width="96" height="54" alt="夕焼け">
                </a>
                <a href="photo/003.jpg" rel="lightbox[nature]" title="富山湾">
                    <img src="thumb/003.jpg" width="96" height="54" alt="富山湾">
                </a>
            </div>
        </body>
</html>