サムネイル画像をクリックして、そのページに、拡大画像をクールにオーバーレイ表示する[Lightbox]
Lightbox v2.51 カスタマイズ(応用編)サンプル

Lightbox v2.51(正規バージョン)Lightbox v2.51 with print button(印刷ボタンバージョン)Lightbox v2.51(カスタマイズサンプルデモ-正規バージョン)

サンプルデモ(下のカスタマイズ修正が反映されています)

  1. 1枚の画像


  2. 複数画像のグループ
    1 公園内並木道 2 噴水近景 3 ベニカナメモチ 4 噴水遠景 5 チューリップ花壇
Lightboxのカスタマイズ(応用編)修正例 (修正値は赤字)
v2.51 拡大表示例
※写真表示例のサンプル写真のサイズは640X480   ※#lightboxOverlayと#lightboxの画面は同じ大きさです。従い白色の囲い枠は実際にはありません。
1. Lightboxページの背景色を変更する(lightbox.css-#lightboxOverlay)(@)- #003300: iron green
2 #lightboxOverlay {
(途中略)
7  background-color: #003300;
2. Lightboxページの背景色の透明度を変更する(lightbox.css-#lightboxOverlay)(@)(IE8透明度変更できない?)
2 #lightboxOverlay {
(途中略)
8  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
9  opacity: 0.2;

※ 8 filter-opacity場合 0(完全に透明) 〜 100(完全に不透明)の範囲で指定する(初期値は100)
※ 9 opacityの場合 0.0(完全に透明)〜1.0(完全に不透明)の範囲で指定する(初期値は1)
3. Lightbox画像コンテナ枠の色(B)及びデータコンテナの色(E)を変更する(別々の色に修正した)(lightbox.css) - #000033: midnightblue
 37 .lb-outerContainer {
 38  position: relative;
 39  background-color: #000033; /*画像コンテナ枠の色(B)*/
 (途中省略)
125 .lb-dataContainer { background-color: navy; /*データコンテナの色(E)追加*/
4. Lightbox画像コンテナ枠の幅を変更する(lightbox.css-.lb-container)(C)
58 .lb-container {
59  padding: 20px;
60 }
5. CLOSEボタン画像を変更する(lightbox.js)(H)
52 fileBottomNavCloseImage: 'images/close-red.png',
6.1 Lightboxコンテナ上のNEXT/PREVボタンの位置を下の方に変更する(lightbox.css-.lb-prev:hover/.lb-next:hover)(F,G)
115 .lb-prev:hover {
116  background: url(../images/prev.png) left 95% no-repeat;
117 }
119 .lb-next:hover {
120  background: url(../images/next.png) right 95% no-repeat;
121 }

※値は、0から100。位置はほぼ中央が48%、それより小さい値の場合は上の方に、大きい値の場合は下の方に配置されます。

6.2 Lightboxコンテナ上のNEXT/PREVボタンを画像の外に表示する(lightbox.css-.lb-prev:hover/.lb-next:hover/.lb-prev/.lb-next)(F,G)
103 .lb-prev {
104  left: -120px; /*left: 0;*/
105  position: absolute; background: url(../images/prev.png) left 48% no-repeat; /*float: left;*/
106 }
107 /* line 76, ../sass/lightbox.sass */
108 .lb-next {
109  right: -120px; /*right: 0;*/
110  position: absolute; background: url(../images/next.png) right 48% no-repeat; /*float: right;*/
111 }

115 /*.lb-prev:hover {
116  background: url(../images/prev.png) left 95% no-repeat;
117 }*/
119 /*.lb-next:hover {
120  background: url(../images/next.png) right 95% no-repeat;
121 }*/

※left rightの値は単位pxを付けます。例-120px
.lb-prev:hover.lb-next:hoverはコメント化し、.lb-prev.lb-nextでNEXT/PREVボタン画像を定義すると、
 NEXT/PREVボタンは常に表示されます。(サンプルデモ)
.lb-prev.lb-nextではなく、.lb-prev:hover.lb-next:hoverでNEXT/PREVボタン画像を定義すると、
 NEXT/PREVボタンはマウスオーバーで表示されます。(デフォルト)

7. Lightboxデータコンテナ上の画像枚数の表示方法をを変更する(lightbox.js)(D)
50 function LightboxOptions() {
51  this.fileLoadingImage = 'images/loading.gif';
52  this.fileCloseImage = 'images/close-red.png'; /*前項5. CLOSEボタン画像を変更する関連*/
53  this.resizeDuration = 700;
54  this.fadeDuration = 500;
55  this.labelImage = "★公園の風景★"; /* Imageを★公園の風景★に変更*/
56  this.labelOf = "/"; /* ofを/に変更(何枚中何枚目の表示例 7of15→7/15)*/
57 }
8. Lightboxデータコンテナ上の画像キャプションと画像枚数の文字色を変更する(デフォルトは未定義)(lightbox.css)(D)
161 .lb-data .lb-caption {
162  font-size: 13px;
163  font-weight: bold;
164  line-height: 1em;
  color:#fff; /*画像キャプション 1行追加 白色*/
165 }
166 /* line 107, ../sass/lightbox.sass */
167 .lb-data .lb-number {
168  display: block;
169   clear: left;
170  padding-bottom: 1em;
171  font-size: 11px;
  color:yellow; /*画像枚数 1行追加 黄色*/
172 }


 
■ lightbox.css と lightbox.js のデフォルトのソースコード(Lightbox v2.51)(参考:修正前)
 
■ Lightbox v2.51 カスタマイズ後の画像(上のサンプルデモで確認できます)

TOP


  最終更新日:2013.2.17 v2.51