Atelierで“jQuery”タグの付いているブログ記事

2013年2月 3日

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

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

 私が管理している友人の 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 の変更は、すぐにページに現れるから楽である。この結果を備忘録として記録しておきたいと思う。

  1. 自作の closelabel に置き換える。
    lightbox.js の41行目を下のように独自の画像に置き換える。
          this.fileCloseImage = 'http://n-shuhei.net/atelier/Jquery2.51/images/closelabel.gif';

  2. セットで写真を表示している場合の表示を "image"(default) から "画像"に置き換える。44行目
          this.labelImage = " 画像 "; 

  3. セットの写真の何枚目を示す、表示を例えば "1 of 8" を " 1 / 8 "に置き換える。45行目
          this.labelOf = "/";  

  4. 背景画面を単一色から、壁紙画面に変える。lightbox.ccs の7行目あたりの背景色をコメントアウトして、壁紙イメージを挿入する。
    /*  background-color: #000000; */
    background-image: url("http://n-shuhei.net/atelier/lightbox2/images/overlay_1.jpg") ; 

  5. 画像の枠(台紙)の色をかえる。lightbox.ccs の35行目あたり。デフォールトは、"white;"
       background-color: #ffffe0;

  6. 画面の"前画面" "次画面" へのボタンを独自のボタンに置き換える。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;

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

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

  

2012年7月17日

隠居のパソコン備忘録: jQuery lightbox (同一画面上に拡大写真をかっこよく表示する)を導入する


 先日来、個人的地図作成サービス Google Maps API V3 を学習してきた。このサービスを使って、加賀地方旅行地図を作成したことを記録している。このサービスを学習中に、jQuery という JavaScript のライブラリーが、いろいろな JavaScript ソフトを導入するときに使われていることが分かった。

 この JavaScript ライブラリーの jQuery を使って、拡大写真の表示を同一画面上に表示する JavaScript の lightbox が新しいバージョン(Version 2.51)になっていることも分かった。(従来のライブラリーは、prototype.js )
 これを、先の加賀地方旅行地図での写真表示に使って見ることにした。
サンプル画像

 インストールについては、Lightbox2 のページから、Lightboxv2.51 をダウンロードし、PC のどこかのフォルダ(例えば、lightbox2.51 を作成し )に解凍する。
  上のページの【How to use】を参考に、ブログをアップロードしているサーバーに新しいフォルダー(例えば、lightbox2.51 )を作成し、ファイル転送ソフト(私の場合、FFFTP )を使ってサーバーにアップロードする。解凍したフォルダーをまるままアップロードしても問題は無いと思う。ただ、サーバーに余裕がない場合には、先ほどのページを参考に、必要なファイルのみをアップロードしたほうが良い。このあたりは、【アクアラングウエスタンver.9.2】というページを参照させてもらった。

 このようにして、lightbox2 が動作するのを確認の上で、次のようなカスタマイズを行った。
  • 初期値では、写真を表示する画面の背景色は黒であるが、これを好きな色に変えるには、lightbox.css の冒頭にある次の青字部分を変更する。
    /* line 6, ../sass/lightbox.sass */
    #lightboxOverlay {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 9999;
      background-color: #408080; 元は、black;
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
      opacity: 0.85;
      display: none;
    }
    


  • 写真ページを閉じるボタンを close.png(close.png) から、自作の closelabel.gif(closelabel.gif) に変更した。変更は、lightbox.js の50行目あたりある次の青字部分を変更した。なお、赤字部分で示したように、imageのありかは、絶対パスで書いておいたほうが無難なようである。
      LightboxOptions = (function() {
        function LightboxOptions() {
          this.fileLoadingImage = 'http://n-shuhei.net/xxxxx/Jquery2.51/images/loading.gif';
          this.fileCloseImage = 'http://n-shuhei.net/xxxxx/Jquery2.51/images/closelabel.gif';
          this.resizeDuration = 700;
          this.fadeDuration = 500;
          this.labelImage = " photo  "; 元は、Image 
          this.labelOf = "of";
        }
    


 この Jquery lightbox2 を、Movable Type 4 で作ったブログの写真(多分1000枚以上ある)の表示に適用した。(従来は、prototype.js の lightbox 2.0 ) Movable Type に適用するには、テンプレートのヘッダーにある lightbox 2.0 の Javascript 表示を lightbox 2.51 のコードに置き換えるだけで、すべての写真表示が新しい lightbox2.51 の表示となるので極めて楽ちんである。(つまり、HTML でのコードは、 lightbox 2.0 でも lightbox2.51 でも同じである。)