隠居のブログ備忘録：JQuery lightbox 2.51 をカストマイズする

　
　昨年夏に、サムネイル写真をクリックするとウインドウ中央に写真が拡大表示される Llightbox をｊQuery という JavaScript のライブラリーを使用した Lightbox2.51 を導入した。
　その時、カストマイズしたのは、デフォールトでは黒である背景画面の色を緑にしたのと、写真ページを閉じるボタンを　デフォールトの

　から、自作の　

　に変更しただけである。

　私が管理している友人の Lightbox は、prototype.js という JavaScript のライブラリーを使った旧バージョン Lightbox2.0 を使っている。背景画面に、蝶をあしらった壁紙を使っていて、これを Lightbox2.51 で使う方策が分からなかったからである。
　 Lightbox2.51 のカストマイズは、【jQueryのlightBoxプラグインの使い方】【jQuery LightBox Pluginの使い方】などに詳しい。これらのプラグインは、新たに JavaScript を付け加えてカストマイズする方法である。だが、私のやり方が悪かったのか上手く行かなかった。
　そこで、当初導入した時にいじったJavaScript lightbox.js とスタイルシート lightbox.css 再度いじって見ることにした。私にコードが理解できるわけではないから、やりかたは　ここはと思われるスクリプト　ないしは　CSS をいじって、FTP でサーバーにアップロードし、実際のページでの変化を観察する方法である。幸い、JavaScript と　CSS の変更は、すぐにページに現れるから楽である。この結果を備忘録として記録しておきたいと思う。

自作の closelabel に置き換える。
lightbox.js の41行目を下のように独自の画像に置き換える。
```
      this.fileCloseImage = 'http://n-shuhei.net/atelier/Jquery2.51/images/closelabel.gif';
```
セットで写真を表示している場合の表示を　"image"(default) から "画像"に置き換える。44行目
```
      this.labelImage = " 画像 "; 
```
セットの写真の何枚目を示す、表示を例えば　"1 of 8"　を　" 1 / 8 "に置き換える。45行目
```
      this.labelOf = "/";　　
```
背景画面を単一色から、壁紙画面に変える。lightbox.ccs の7行目あたりの背景色をコメントアウトして、壁紙イメージを挿入する。
```
/*  background-color: #000000; */
     background-image: url("http://n-shuhei.net/atelier/lightbox2/images/overlay_1.jpg") ;　
```
画像の枠（台紙）の色をかえる。lightbox.ccs の35行目あたり。デフォールトは、"white;"
```
   background-color: #ffffe0;
```

画面の"前画面"　"次画面"　へのボタンを独自のボタンに置き換える。lightbox.ccs の112行目、117行目あたり。　

    background: url(http://n-shuhei.net/lightbox2/images/prevlabel.gif) left 40% no-repeat;


    background: url(http://n-shuhei.net/lightbox2/images/nextlabel.gif) right 40% no-repeat;

写真の説明文字の色を変える。lightbox.ccs の145行目あたり。デフォールトは灰色。
```
 color: #ffffff;
```

　その他、細かい部分も、CSS をいじることで変えられそうだ。
サンプル画像は、次のエントリー【隠居の探鳥ウォーク：ハリエンジュ　花芽ついばむ　鷽（ウソ）４羽】などで確認できます。

　　

隠居のブログ備忘録：JQuery lightbox 2.51 をカストマイズする

タグ:

コメントする