Atelier

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

　この JavaScript ライブラリーの ｊQuery を使って、拡大写真の表示を同一画面上に表示する 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)　から、自作の　(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 でも同じである。）