“DarkBox” Lightbox

‘Lightbox’は、シンプルでエレガントなスタイルと実装が容易であるということで人気を博しました。モーダルダイアログを使用し、大きな画像を表示するためのスクリプトです。

JavaScript

スクリプトを動作させる為に、スライダーを持ったindex-#.htmlには以下のHTMLコードが含まれています:

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/darkbox.js" type="text/javascript"></script>

script.jsファイルには基本的な値を使用してスクリプト機能を初期化するコードが記述されています。

HTML

HTMLコードは以下のように記述します:

<li><a href="images/photo1.jpg"><img alt="" src="images/thumb1.jpg" /></a></li>

<img>タグのsrc属性にはdarkboxで出力される画像へのパスを定義します。

CSS

style.cssファイルにはスクリプトと関連した以下の記述があります。
スタイルは変更する必要があります:

/* Darkbox */
.darkbox-frame {
    position:fixed;
    top:0;
    left:0;
    display:none;
    overflow:hidden;
    width:100%;
    height:100%;
    z-index:999;
}
.darkbox-frame-on {
    display:block;
}

/* Shadow */
.darkbox-shadow {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#000;
    opacity:0;
}

/* Canvas */
.darkbox-canvas {
    position:absolute;
    top:50%;
    left:50%;
    overflow:hidden;
    margin:-40px 0 0 -40px;
    width:80px;
    height:80px;
    background:#000 url(&quot;images/spinner.gif&quot;) 50% 50% no-repeat;
    opacity:.5;
}
.darkbox-canvas img {
        display:block;
        visibility:hidden;
        border:4px solid #fff;
}
.darkbox-canvas-load {
    background-image:none;
}
.darkbox-canvas-done {
    overflow:visible;
    opacity:1;
}
.darkbox-canvas-done img {
        visibility:visible;
        opacity:0;
}

/* Button */
.darkbox-button {
    position:absolute;
    top:-13px;
    display:none;
    width:31px;
    height:31px;
    background:url(&quot;images/lightbox-btn-close.png&quot;) no-repeat;
    cursor:pointer;
    z-index:1;
}
.darkbox-button-on {
    display:block;
}
.darkbox-button-left {
    left:-16px;
}
.darkbox-button-right {
    right:-16px;
}

Comments are closed.