昨年夏に、サムネイル写真をクリックするとウインドウ中央に写真が拡大表示される 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 の変更は、すぐにページに現れるから楽である。この結果を備忘録として記録しておきたいと思う。

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

　　

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

Internet Explorer 8（IE8：WindowsXP)に変えてから、私が管理しているブログのうち２つのブログ（Atelier　Shuhei Weblog と　Studio YAMAKO）　メインページで　lightboxの不具合が起こった。背景が黒くならない。個別ページでは、正常に表示されている。ただ、管理している３つのブログの一つ、Masjii's Blog では上手く機能している。
今まで学習したことを調べたり、ネットでサーチしてみても原因がわからない。両者のソースコードやStylesheet　を１ヶ月以上かけて仔細に調べてみたが、全く解決の糸口が見つからなかった。

　先日、Atelier　Shuhei Weblog をIE8 のWindows画面を開けようとすると、次のようなエラーメッセージのポップアップ画面が出て停止した。
　このエラーについて調べると、どうやら DOM という　API に関連しているらしい。DOM については全く知識がないが、どうやらプログラムとくに JavaScript　の実行順序が起因しているように思われた。
そこから類推して、Atelier　Shuhei Weblog やStudio YAMAKOのメインページには、JavaScript を多用した Lightbox で開く写真が沢山あるので時間がかかるのではないか、それが原因ではないかと思われた。Masjii's Blog には、写真はあまりなくテキストが中心である。

　そこで、MovableType4.2 の「ブログ記事の設定」で、表示数を 30 から 10 に変更すると、写真の背景は黒くなり正常に表示されるようになった。Masjii's Blog はもともと10 ブログ記事だけの表示になっていた。メインページの表示が10 件だけでも問題は余りないと思われる。

　懸案の問題が解消したので、解決策をネットでサーチしている中で見つけた lightbox のカスタマイズを参考にいじってみた。以前にも、画面を「閉じる」「Next」「Back」ボタンをカスタマイズしている。
　今回は、写真の台紙を従来の白から薄緑色に（それに伴って、キャプチャーの文字を白に）、背景の overlay を黒一色から模様入りの壁紙風に変えてみた。 Studio YAMAKOの背景は、蝶の柄が入った壁紙にしてみた。私のは青空である。
　三つを並べてみたい。

sample1：Atelier　Shuhei Weblog

sample2：Masajii's weblog

sample3:Studio Yamako

　lightbox 2.0 の最新バージョン 2.04 の導入は失敗した。導入の手順を間違ったものと思うが、サイトそのものにアクセスできないという致命的な障害がでるので、すぐに元のバージョン 2.03 に戻した。

　そのときのドサクサにまぎれてテンプレートなどをいじったせいか、次の条件のときに、画像が現れるポップアップ画面の背景 overlay が黒くならないという現象がでた。

• Windows XP SP2
• Internet Explorer 7
• MovableType 4.1 テンプレート：小粋空間：two-column-liquid-right メインページ

　アーカイブページやWindowsVista　Mozilla(Firefox) では起こらない。
　上記は私の環境で、それ以外については確認していない。

　lightbox2.0 のページの support では、overlay については次の説明がある。


　スタイルシートでは、この設定は既に以下のようになっており、問題はなさそうである。

/* すべて */
* {
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, sans-serif;
    word-break: normal;
    line-break: strict;
}

　ネットサーチもしてみたが、的確な示唆はヒットしなかった。見当はずれであるが、「小粋空間」さんの「Lightbox JS の Movable Type での不具合を修正する」のエントリーに、コメントとして質問を投げかけてみた。親切に以下のような返事をいただいたが、結局原因不明である。

　アクセス解析サービスの Artisan の分析では、私のサイトへの訪問者は、WindowsXP IE6/7 でのアクセスが最も多いから、早く修復したいと思ったが方途がない。

　運営している友人の２つのブログのひとつを見ていると、なんと上の条件でも、lightbox で拡大画像表示されるポップアップ画像の背景overlay が黒くなっていることが分かった。いじっているうちに偶然うまくいっていたらしい。

　このブログも同じ小粋空間：two-column-liquid-right のテンプレートを使っているので、lightbox　表示に関連していると思われるテンプレートモジュールの「ヘッダー」を子細に見てみると、正常に表示されるブログのテンプレートの<div> タグを閉じる </div> タグがひとつ少ないことを見つけた。
　どうやら、テンプレートモジュールの「ヘッダー」で<div> タグを閉じる </div> タグを余計にひとつつけたことが原因らしく思われた。テンプレートの構成上テンプレートモジュールの「ヘッダー」の<div> タグのひとつは、テンプレートモジュールの「フッター」で閉じられることになっていたのだ。

　「ヘッダー」の余計な </div> タグを削除すると上手く背景overlay が黒くなった。原因は、まったくそのせいと思っていたが、再現性を確認するために、「ヘッダー」テンプレートに余計な </div> タグをつけても、背景overlay は黒くなる。再現性はないのだ。
　どうやら修復は不可逆性だったようで釈然としないのだが、うまく表示されるようになっているので、まあ、いいか　という気分である。
　ブラウザーに依存する障害は、いつもよく分からない。

　野鳥の写真サムネイルは、Kinarie&May さんの Flash MT用のフォトサムネイラーを使ってきた。このプラグインは、エントリーのカテゴリー（例えば birds ）ごとに掲載されている写真をサムネイル化してくれる。

　非常に有用であるが、欠点は各エントリーに掲載されている１枚の写真かすべての写真を選択してサムネイルすることである。私のように、一つのエントリーにいろいろな写真をのせていると雑音の多い野鳥の写真サムネイルができてしまう。
　それとサムネイル化するファイルの拡張子は、小文字の jpg でなければなければならない。大文字の JPG ファイルも結構あり、修正するのは大変である。
　それで、DIY作品集のようにテーブルを利用して web page 作ることにした。

　ひとつづつのセルに写真ファイルを納めていくことは時間のかかる作業であるが、プラグインの lightbox　が使えたり、録音したさえずりを再生するプレイ・ボタン を設置できたりするので自由度が高い。

　右サイドメニューに置いていた「野鳥の写真サムネイル」ボタンのリンク先を作った写真集へ付け替えた。興味のある方は、一度覗いてみてください。

　野鳥ばかり追っかけている人のブログなどに出てくる写真と比較すると余りにもお粗末であるが、それぞれの写真のリンクをたどるとその写真を撮ったTPO が分かるので懐かしい。 早い時期にデジスコの体制を整えて、もう少しましな写真集に撮りたいと思っている。　

　最近、友人の海外旅行の写真集をブログ Studio YAMAKO に作成していることもあって、画像の挿入する機会が増えた。MT4.1 で写真を掲載することは、MT3.3 のときに比べれば少し楽になっているが、まだいろいろと操作をしなければならない。

　私の場合、写真はブログ本文にサムネイルを掲載し、これをクリックすれば画面全体がブラックアウトして、ポップアップ的に原寸の写真が表示される lightbox というプラグインを使用しているので、その分も操作が多い。そこで、私の知識でもう少し手を抜くことはできないかググッテみた。

　MT4.1 で画像の挿入操作をしたときに自動的に貼り付けてくれるHTMLコードは下のようなコードである。

<form mt:asset-id="227" class="mt-enclosure mt-enclosure-image" style="display: inline;">
<a href="http://n-shuhei.net/studio_yamako/xxxxxx/080818_001.jpg">
<img alt="080818_001.jpg" src="http://n-shuhei.net/studio_yamako/xxxxxx/080818_001-thumb-200x132.jpg" width="200" height="132" class="mt-image-right" style="float: right; margin:  0 0 20px 20px;" /></a></form>

今までは作成してくれたコードを、次の青字のように数カ所属性を追加したり、手を加えたりしていた。

<form mt:asset-id="227" class="mt-enclosure mt-enclosure-image" style="display: inline;">
<a href="http://n-shuhei.net/studio_yamako/xxxxxx/080818_001.jpg" title="ABC" rel="lightbox[aa]">
<img alt="クリックすると大きな写真になります" src="http://n-shuhei.net/studio_yamako/xxxxxx/080818_001-thumb-200x132.jpg" width="200" height="132" class="mt-image-right" style="float: right; margin: 5px;" /></a></form>

　このように手を加えることは挿入する写真が多くなると結構な手間になる。
　「モバイルタイプ備忘録」の関連ページなどを参考に、perl なんてこれから晩学するつもりで全く分からないが、画像の挿入時に使われるソース・プログラムを覗いて、「秀丸」でいじってみた。
　ソース・プログラムは、/cgi/mt/lib/MT/Asset フォルダーにある Image.pm である。この320行目あたりにある行を青字のように変えた。

# '<a href="%s"><img alt="%s" src="%s" %s %s /></a>',
'<a href="%s" title="" rel="lightbox[]"><img alt="%s" src="%s" %s %s /></a>'

　私の場合、lightbox は 2.0 を使っているので、グループ表示のための [] とキャプション挿入の title="" を付け加えた。日本語文字列の「クリックすると大きな写真になります」を入れようとしたが、これは上手くいかなかった。　perl の勉強が必要のようだ。この挿入は、「だい」→「クリックすると大きな写真になります」とIME に単語登録して簡単化することにした。
　初期値では、サムネイル写真を表示するボックスの周囲に余白を作る style の margin が私の場合適切ではないので、この部分も先ほどのソース・プログラムで見つけて(279・282行目あたり）、次のように改定すると上手くいった。

# ' $wrap_style .= q{style="float: left; margin: 0 20px 20px 0;"};
    $wrap_style .= q{style="float: left; margin: 5px;"};

# ' $wrap_style .= q{style="float: right; margin: 0 0 20px 20px;"};
 ' $wrap_style .= q{style="float: right; margin: 5px;"};

　ソース・プログラムが少しいじれるようになったので、ブログつくりも面白みが増えたが、リスクとは隣り合わせのようだ。しっかりとバックアップをとってからいじるようにしたいと思う。それにしても、学習しなければならないことが多いので、もうちょっとの間はボケの進行が止まっていて欲しいと祈念している。

　litebox1.0 jpeg　IE と揃うと写真の表示で白い点々（white noise) が出ることがあることは、以前のエントリーで記載した。それで、litebox1.0 を lightbox2.0 に変更したら、 white noise が出なくなった。この lightbox2.0 の support 欄Q&Aに次のような記載があったので、導入してみた。最近のエントリー＜隠居の庭：夏の花（２）＞のローズアーチの写真で使っている。

Can I insert links in the caption?
Yes, but you need to convert quotes and greater and less than symbols into their html entity equivalents.
For example:
<a href="images/image-4.jpg" rel="lightbox" title="&lt;a href=&quot;link.html&quot;&gt;my link&lt;/a&gt;">Image</a>

　html entity equivalents とは、日本語で言うHTMLエンコードのことのようだが、引用の中で使った &lt; は、エントリーのフォーム(HTML)では &amp;lt; と書かないと表現されない。
　なお、HTMLエンコードするには、 lightbox2.0 のソースコードの中に、エンコードおよびデコードしてくれるページが記載されていた。日本語でも同様のページがある。ありがたいことです。

　ヤブカンゾウはニッコウキスゲの仲間らしいが、花びらがくしゃくしゃなのが特徴らしい。決して綺麗ではない。その側に咲いている黄色のヘメロカリスは可憐である。植木鉢に植えられてから久しいマンリョウに白い花が付いている。これが、赤い実になるらしい。
　ところで、このエントリーではlightbox　2.0から発展したLitebox-1.0.ｊｓをインストールした。実はlightbox　2.0のインストールは上手くいかなかった。「小粋空間」さんがインストール法を紹介してくれることになっていたが、その間にLitebox　1.0がでた。lightbox　2.0から画像をグループ化してスライドショウ的に見る仕様になっており、それを導入したかったのである。今回、「小粋空間」にインストール法が紹介されたので早速取り組んだ。サムネイルをクリックすると大きな写真になり、その右上近くにカーソルを近づけると「NEXT」の文字が現れ、左上には「PREV]が現れる。どうやら上手く機能しているようである。表現の文字などはもう少し調査してみたい。

続きを読む "隠居の庭：ヤブカンゾウ by Litebox-1.0.ｊｓ"

　５月の庭は賑やかである。とくにビオラ・パンジー類は様々な彩りで咲き誇る。そんな中で白いジャスミンが際だっている。

　

　昨日のゴルフは強い雨だったのに今日は風が強いものの良い天気である。めったに現れない黒い蝶が玄関の寄せ植えに飛来し、あまり離れようとしない。NikonD70で連写した。カメラをPCにUSB接続して整理しながら名前を調査した。本の積ん読が好きだった親父が残していた１９６６年４月発行の「標準原色図鑑全集１：蝶・蛾」（古本屋に持って行ったが昔の本は写真の質が悪いと言うことで相手にもされなかった。捨てないで良かった。）とGoogle（インターネットという巨大な百科事典があるから本はいらないのだが。)とで探してみたら、どうやらオナガアゲハらしい。間違っていたらご指摘ください。（追記を見てください。指摘を受け訂正しました。）ついでに、前に撮った蝶の名前を確認してみるとどうやらキアゲハは間違いで単なるアゲハのようである。

続きを読む "<s>オナガアゲハ</s>クロアゲハ"