Lightbox JS v2.0は知っている方も多いと思いますが、基本的な使い方とカスタズって言える程ではないですが、Lightbox表示中の「背景の色」「画像周りの色」「ボタン系の画像の変更」の変更の仕方についての解説をしたいと思います。
Lightbox JS v2.0の使い方
- Lightbox 2ダウンロード
- 解凍したファイルにある「js」「css」「images」フォルダをアプロード。
- headタグ内に下記ソースを記述
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
変更前のHTMLソース
<p><a href="images/image-1.jpg"><img src="images/thumb-1.jpg" alt="" width="100" height="40" /></a></p>
変更後（Lightbox使用）のHTMLソース
<p><a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" alt="" width="100" height="40" /></a></p>
上記ソースの用に a タグの中に「rel="lightbox"」と追加するだけで使えちゃいます。尚画像をグループ化にしたい場合は「rel="lightbox[roadtrip]"」と記述していく事で、「rel="lightbox[roadtrip]"」がついた画像達がプレビューされていく感じです。
Lightbox JS v2.0カスタマイズ方法
背景の色を変更（デフォルトでは黒い部分）
lightbox.cssの一番下に記述してある#overlayのbackground-color: #000;となっている「#000」を任意の色に変更する。
画像周りの色を変更（デフォルトでは白い部分）
lightbox.cssの上から4つ目に指定してある#outerImageContainerと下から7つ目に指定してある#imageDataContainerのbackground-colorの色を任意の色に変更。
(変更した場合はCLOSEの画像は白のままなので、この画像を指定した色にあわせて作り直す事)
ボタン系の画像の変更
一番簡単なのが解凍後「images」フォルダに入っている画像の名前と同じに名前にし、上書きする。
ディレクトリの変更
現在「images」に入ってる画像を「images/lightbox/」と変更した場合の説明をします。
- lightbox.cssにある「background: url(../images/prevlabel.gif)」「background: url(../images/nextlabel.gif)」
- lightbox.jsにある「fileLoadingImage: 'images/loading.gif',」「fileBottomNavCloseImage: 'images/closelabel.gif',」
- 1と2であげた箇所の「images」となっている箇所を「images/lightbox/」に変更する。
例：「background: url(../images/prevlabel.gif)」は「background: url(../images/lightbox/prevlabel.gif)」
追記：2/20 白い枠を消した状態
lightbox.cssに記述されている「#outerImageContainer background-color: #fff;」「#imageDataContainer background-color: #fff;」を削除します。
CLOSEとNEXTとPREVの画像を背景の色に合わせて作り変えました。
追記：5/26 NEXTとPREVの位置を変える
NEXTとPREVが指定してある部分は lightbox.css の16 17行目になります。
#prevLink:hover, #prevLink:visited:hover { background: url(../image/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../image/nextlabel.gif) right 15% no-repeat; }
15%と指定してある部分が縦軸の指定なのでここ下の放置に配置した場合は95%に指定して下さい。
#prevLink:hover, #prevLink:visited:hover { background: url(../image/prevlabel.gif) left 95% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../image/nextlabel.gif) right 95% no-repeat; }
追記：7/16
image 1 of 5を非表示、NEXTとPREVがある場合は常に表示というリクエストがあったので追記にて変更部分する部分を紹介しておきます。
両方とも触るのは lightbox.css のみで大丈夫です。
image 1 of 5を非表示（24行目）
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
の部分を
#imageData #numberDisplay{ display: none; }
NEXTとPREVがある場合は常に表示（14行目～17行目）
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../image/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../image/nextlabel.gif) right 15% no-repeat; }
の部分を
#prevLink { left: 0; float: left; background: url(../image/prevlabel.gif) left 15% no-repeat; }
#nextLink { right: 0; float: right; background: url(../image/nextlabel.gif) right 15% no-repeat; }
と記述する事で出来ます。
追記：9/17 拡大表示時の位置を変更する 1（右上に表示）
lightbox.css（1行目）
#lightbox{ position: absolute; right: -63%; z-index: 100; line-height: 0;}
lightbox.js（231行目）
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 500);
追記：9/17 拡大表示時の位置を変更する 2
左よりで、上からの表示位置を少し下にずらした表示です。
※左下に表示はおそらく出来ないと思います。
lightbox.css（1行目）
#lightbox{ position: absolute; right: 73%; z-index: 100; line-height: 0;}
lightbox.js（231行目）
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 2);
初めまして！
Jquery関係でいつもお世話になっております！
lightboxの応用についてお伺いしたいのですがよろしくお願いします。
当方、ブログのエントリーにlightboxを使用しています。クリック時に拡大し、アンカーの「title」がキャプションとして表示されますが、これを「title」では無く「alt」に変更する事はできないでしょうか…
Jqueryでimgのaltを取り出し、attrでaのtitleに書き出してもダメでした。
なんとかならないでしょうか…
よろしくお願いします！
2010年08月06日 03:31