という訳で、Lightbox JS なわけだが。（笑）

azarasienosima.jpg最近、コメント等のやり取りがないと言われてしまったので、とりあえず絡まないとなぁと言うわけでもないのだが、ここからひろってきましたよ。（爆）

■TB to Lightbox JS で画像を表示する by 小粋空間

サムネールをクリックすると、オーバーレイで画像を表示してくれるスクリプト。coolで良い感じだったので入れてみた。ただ、index ページでは機能するんだけど、個別エントリーアーカイブでは機能しないので、トップページからサムネイルをクリックしてみてくらさい。

※エントリーアーカイブ等での対処方法を早速あげていただきました。loading.gif を読みに行く時に、パスが違うので引っかかってたようです。ありがとうございます。

設置方法は yujiro さんのところ参照いただければ書いてあるのでそっちを参照ください。一応、MTでの設置は追記以降に覚え書きしとくけど。（笑）

で、これ、サムネール画像の a herf タグに rel=”lightbox” という属性を設定しなくちゃならないので、一々アップロードする度に設定しなくちゃならないのが面倒。で、lib/MT/App/CMS.pm ファイルを以下のように編集。

※システムファイルを改変する時は、元ファイルのバックアップは必ずとること。

mt管理画面からファイルのアップロードを使用して画像をアップロードする時の画面に、ポップアップにするか埋め込みにするか選択できるんですが、埋め込み側の方に、 rel=”lightbox” が入るように改変してます。CMS.pm ファイルの3750行目ぐらい（私の環境で）に以下のように青文字の部分を追加。（赤字の部分は今回とは関係ありません。ちなみに、どういうことかというと、画像の四方に 5px の余白をとって、画像の横から文字が書けるようにして、リンクのボーダーを0にしなさいっちゅうことです。）

<a href="$url" rel="lightbox" ><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" hspace="5" vspace="5" align="left" border="0" /></a>



■MTでの Lightbox JS の設定方法。

  1. 動作に必要なファイルをここより全てDL。ファイルの内容は、スクリプト本体・スタイルシート・背景画像・ローディング画像の四つ。
  2. DLしたファイルを ブログのindexファイルがあるディレクトリへ全てアップロード。
  3. 各テンプレートの<head>～</head>にスクリプトとスクリプト用のスタイルシートを設定。

    4. <script type="text/javascript" src="<$MTBlogURL$>lightbox.js"></script>


    <link rel="stylesheet" href="<$MTBlogURL$>lightbox.css" type="text/css" />


  4. 以上、再構築して終わり。