隠居のパソコン備忘録：ｊQuery lightbox （同一画面上に拡大写真をかっこよく表示する）を導入する

　先日来、個人的地図作成サービス 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 でも同じである。）

隠居のパソコン備忘録：ｊQuery lightbox （同一画面上に拡大写真をかっこよく表示する）を導入する

タグ:

トラックバック

コメント

コメントする

隠居のパソコン備忘録： ｊQuery lightbox （同一画面上に拡大写真をかっこよく表示する）を導入する

タグ:

トラックバック

コメント

コメントする

隠居のパソコン備忘録：ｊQuery lightbox （同一画面上に拡大写真をかっこよく表示する）を導入する