Lightboxページの背景の色（デフォルト：白）を変えるなど、Lightboxのカスタマイズ方法を述べます。下はLightbox表示例。

1. Lightboxページの背景色を変更する（lightbox.css-.lightboxOverlay）（�@）- pink：■ iron green
	7 .lightboxOverlay { 8   position: absolute; 9   top: 0; 10  left: 0; 11  z-index: 9999; 12  background-color: pink; /*デフォルト　black*/ 13  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); 14  opacity: 0.8; 15  display: none; 16 }
2. Lightboxページの背景色の透明度を変更する（lightbox.css-.lightboxOverlay）（�@）
	7 .lightboxOverlay { （途中省略） 12  background-color: navy; /*デフォルト black*/ 13  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); /*デフォルト 80*/ 14  opacity: 0.5; /*デフォルト 0.8*/ （途中省略） 16 } ※ 13 filter-opacity場合　0（完全に透明） 〜 100（完全に不透明）の範囲で指定する（初期値は100） ※ 14 opacityの場合　0.0（完全に透明）〜1.0（完全に不透明）の範囲で指定する（初期値は1）
3. Lightbox画像コンテナ枠の背景色（�B）を変更する（別々の色に修正した）（lightbox.css- .lb-outerContainer）
	43 .lb-outerContainer {  44 　position: relative;  45 　background-color: yellow; /*画像コンテナ枠の色（�B）デフォルト white*/
4. Lightbox画像コンテナ枠の幅を変更する（lightbox.css-.lb-container）（�C）
	63 .lb-container { 64 　padding: 10px; /*デフォルト 4px*/ 65 }
5. CLOSEボタン画像を変更する（lightbox.css-.lb-data .lb-close）（�H）
	195 background: url(../images/close-red.png) top right no-repeat; /*デフォルト ../img/close.png*/
6.1 Lightboxコンテナ上のNEXT/PREVボタンの位置を下の方に変更する（lightbox.css-.lb-nav a.lb-prev / .lb-nav a.lb-next）（�F,�G）
	109 .lb-nav a.lb-prev { （途中省略） 113  background: url(../images/prev.png) left 95% no-repeat; /*デフォルト 48*/ （途中省略） 127 .lb-nav a.lb-next { （途中省略） 131  background: url(../images/next.png) right 95% no-repeat; /*デフォルト 48*/ ※値は、0から100。位置はほぼ中央が48%、それより小さい値の場合は上の方に、大きい値の場合は下の方に配置されます。
6.2 Lightboxコンテナ上のNEXT/PREVボタンを画像の外に表示する（lightbox.css-.lb-nav a.lb-prev / .lb-next:hover/.lb-prev/.lb-next）（�F,�G）
	109 .lb-nav a.lb-prev { 110  width: 34%; 111  left: -50px; position: absolute; /*マイナス値を指定する。デフォルト 0*/ 112  float: left; 113  background: url(../images/prev.png) left 90% no-repeat; 114  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); /*NEXT/PREVボタンを常に表示したい場合修正。デフォルト 0*/ 115  opacity: 1; /*NEXT/PREVボタンを常に表示したい場合修正。デフォルト 0*/ 127 .lb-nav a.lb-next { 128  width: 64%; 129  right: -50px; /*マイナス値を指定する。デフォルト 0*/ 130  float: right; 131  background: url(../images/next.png) right 90% no-repeat; 132  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); /*NEXT/PREVボタンを常に表示したい場合修正。デフォルト 0*/ 133  opacity:1; /*NEXT/PREVボタンを常に表示したい場合修正。デフォルト 0*/ ※left rightの値はマイナス値で単位pxを付けます。例： -50px 。 ※通常、NEXT/PREVボタンは、マウスオーバーした場合に表示されますが、NEXT/PREVボタンを画像の外に出した場合は、常に表示するのもよいでしょう。 ※ 114 および 132 filter-opacity場合　0（完全に透明） 〜 100（完全に不透明）の範囲で指定する（初期値は100） ※ 115 および 133 opacityの場合　0.0（完全に透明）〜1.0（完全に不透明）の範囲で指定する（初期値は1）
7. Lightboxデータコンテナ上の画像枚数の表示方法をを変更する（lightbox.js）（�D）
	26 LightboxOptions.prototype.albumLabel = function(curImageNum, albumSize) { 27  return "★公園の風景2014 - " + curImageNum + " / " + albumSize; /* Imageを★公園の風景2014 - に変更*/ 28 }; /* of を / に変更（何枚中何枚目の表示例 7of15→7/15）*/
8. Lightboxデータコンテナ上の画像キャプションと画像枚数の文字色を変更する（デフォルトは未定義）（lightbox.css-.lb-data .lb-caption / .lb-data .lb-number）（�D）
	176 .lb-data .lb-caption { 177 　font-size: 13px; 178 　font-weight: bold; 179 　line-height: 1em; 　　color: white; /*画像キャプション　1行追加　白色*/ 180 } 181 182 .lb-data .lb-number { 183 　display: block; 184 　clear: left; 185 　padding-bottom: 1em; 186 　font-size: 11px; 187 　color: yellow; /*何枚中何枚目表示（画像枚数）　#999999*/ 188 }

 

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

 

■　Lightbox v2.7.1 カスタマイズ後の画像（こちらのサンプルデモで確認できます）

サンプル｜使用方法｜Lightboxのダウンロード｜Lightboxのカスタマイズ（応用編）

TOPへ

Lightbox系メディアビューア（まとめ サイト内リンク）