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

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

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

  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画像コンテナ枠の色（③）及びデータコンテナの色（⑥）を変更する（別々の色に修正した）（lightbox.css） - #000033：■ midnightblue
 37 .lb-outerContainer {
 38 　position: relative;
 39 　background-color: #000033; /*画像コンテナ枠の色（③）*/
　（途中省略）
125 .lb-dataContainer { background-color: navy; /*データコンテナの色（⑥）追加*/
4. Lightbox画像コンテナ枠の幅を変更する（lightbox.css-.lb-container）（④）
58 .lb-container {
59 　padding: 20px;
60 }
5. CLOSEボタン画像を変更する（lightbox.js）（⑨）
52 fileBottomNavCloseImage: 'images/close-red.png',
6.1 Lightboxコンテナ上のNEXT/PREVボタンの位置を下の方に変更する（lightbox.css-.lb-prev:hover/.lb-next:hover）（⑦,⑧）
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）（⑦,⑧）
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）（⑤）
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）（⑤）
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