サムネイル画像をクリックして、そのページに、拡大画像をクールにオーバーレイ表示する［Lightbox］
Lightboxのカスタマイズ（応用編）サンプル

サンプル

  1. １枚の画像
    屋根の上の牛

  2. 複数画像のグループ
    1　公園内並木道 2　噴水近景 3　ベニカナメモチ 4　噴水遠景 5　チューリップ花壇
Lightboxのカスタマイズ（応用編）修正例 （修正値は赤字）
1. Lightboxページの背景色を変更する（lightbox.css）- #003300：■ iron green
27 #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #003300; }
2. Lightboxページの背景色の透明度を変更する（lightbox.js）
52 overlayOpacity: 0.5, // controls transparency of shadow overlay}
3. Lightbox画像コンテナ枠の色（②）及びデータコンテナの色（③）を変更する（別々の色に修正した）（lightbox.css） - #000033：■ midnightblue
 5 #outerImageContainer{ position: relative; background-color: #000033; width: 250px; height: 250px; margin: 0 auto; }
19 #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #003300; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%
4. Lightbox画像コンテナ枠の幅を変更する（lightbox.css/lightbox.js）
・lightbox.css （画像コンテナ枠の幅②）

6 #imageContainer{ padding: 20px; }
・lightbox.js （データコンテナ③の横幅を、上と合わせて修正（調整）します）

57 borderSize: 20, //if you adjust the padding in the CSS, you will need to update this variable
5. CLOSEボタン画像を変更する（lightbox.js）
50 fileBottomNavCloseImage: 'images/close-06.jpg',
6. Lightboxデータコンテナ上のNEXT/PREVボタンの位置を下の方に変更する（lightbox.css）
16 #prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 95% no-repeat; }
17 #nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 95% no-repeat; }
7. Lightboxデータコンテナ上の画像枚数の表示方法をを変更する（lightbox.js）
61 labelImage: "★公園の風景★",
62 labelOf: "/"
8. Lightboxデータコンテナ上の画像キャプションと画像枚数の文字色を変更する（デフォルトは未定義）（lightbox.js） - #fff：■ white
23 #imageData #caption{ font-weight: bold; color:#fff;
24 #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; color:#fff;


 
■ lightbox.css と lightbox.js のデフォルトのソースコード（Lightbox v2.04）（参考：修正前）

TOP

  最終更新日：2010.2.21