第41回：Lightbox JS v2.0でサムネイル画像をオーバーレイ表示させる
第40回では、写メールでエントリーを投稿する Mail2MTEntry の設置について説明しました。今回は、久しぶりの更新になりましたが Lightbox JS v2.0 というJavaScriptを利用して、サムネイル画像を同一画面上にオーバーレイ表示させる方法について説明していきます。
Lightbox JSは、とても有名なJavaScriptなので敢えてここで説明するほどのことではないのですが、一応、備忘録の意味もこめて解説します。
まず、最終的にどのようにしたいかは以下の画像をクリックしていただければすぐにわかるかと思います。
ここで行う作業は以下の3つ。
（１） Lightbox JS v2.0 を設置する
（２） クリックでオーバーレイ画像（拡大した画像）が閉じるようにする
（３） 複数枚の画像を、「Next」「Prev」ボタンで前後に移動できるようにする
■（１） Lightbox JS v2.0 を設置する
まず最初に、Lightbox JS v2.0 をこちらのサイトからダウンロードしてきます。
ダウンロードしたファイルを解凍すると、「images」「js」「css」が格納されています。3つのディレクトリをそのまま MTのブログディレクトリ（インストールディレクトリではない方）にコピーしてください。既に「js」や「css」ディレクトリが存在する場合は、ファイルだけを抜き出してコピーしましょう。
次に、MTから「メイン・メニュー」→「テンプレート」→「メインページ」を開いて、<head>～</head>の間に以下の4行を挿入してください。上3行は、サムネイル画像をクリックした時に効果として表示されるJavaScriptを読み込み、4行目はCSSを読み込んでいます。
<script type="text/javascript" src="<$MTBlogURL$>js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/lightbox.js"></script>
<link rel="stylesheet" href="<$MTBlogURL$>css/lightbox.css" type="text/css" media="screen" />
次に、第8回でも説明した画像のアップロードを簡単にするプラグイン、BetterFileUploaderを使って画像をアップロードします。
アップロード後に、サムネイル画像を何ピクセルにするかのダイアログが表示されたら、任意のピクセル数を入力し、「埋め込み」をクリックします。今まで「ポップアップ」を選んで新規ウィンドウが開くようにしていた方はここでは注意してください。
以下のようなタグが生成されたら、リンクプロパティに rel="lightbox" を追加してください。ここまで完了したら、エントリーを保存し、再構築します。
これで Lightbox JS v2.0 の設置はひとまず完了です。簡単ですね。
あとは、表示されたサムネイル画像をクリックしてみて、Lightbox JS v2.0の効果が現れているかどうかを確認してみてください。
■（２） クリックでオーバーレイ画像（拡大した画像）が閉じるようにする
Lightbox JS v2.0の設置はひとまず完了しましたが、拡大された画像を閉じるには、下の方にある「CLOSE」ボタンをクリックしなければなりません。これはちょっと面倒なので、画像をクリックしたら元の画面に戻るように lightbox.js 編集しておきましょう。
編集方法は簡単です。「js」ディレクトリにコピーした lightbox.js を開き、以下の4行を見つけてください。およそ、229行目あたりにあります。
objLightbox.setAttribute('id','lightbox');
objLightbox.style.display = 'none';
objBody.appendChild(objLightbox);
この4行目の下辺りに、以下の1行を追記してください。追記したら、 lightbox.js を保存して閉じてください。ここまで終了したら、ブラウザをリロード、拡大された画像をクリックして元の画面に戻るかどうか確認してみてください。
■（３） 複数枚の画像を、「Next」「Prev」ボタンで前後に移動できるようにする
複数枚の画像がある場合に、いちいち画像を開いたり閉じたりして何度もクリックするのが面倒だという場合には、「Next」「Prev」ボタンをつけて画像を前後に移動できるようにします。これは、HTML の a タグに属性を加えるだけなので簡単です。
先ほどは、 rel="lightbox" という属性を付加しましたが、今度は rel="lightbox[roadtrip]" という属性を付加しておきます。これによって、複数の画像をワンクリックで前の画像へ行ったり、次の画像へ行ったりと、ペラペラとめくることができるようになるので非常に便利です。ただし、上記で説明した「左クリックで元の画面に戻るようにする」ことはできなくなりますので注意してください。
<a href="http://～/upload/2007/01/0006.jpg" rel="lightbox[roadtrip]"><img alt="0006.jpg" src="http://～/upload/2007/01/0006-thumb.jpg" width="128" height="96" /></a>
なお、BetterFileUploaderでのタグ生成では、リンクタグに rel="lightbox" が自動追記されません。IMG タグを作成するたびに、この属性を手打ちするのが面倒ということであれば、
（MT）/plugins/BetterFileUploader ディレクトリにある BetterFileUploader.pl を開き、以下の行を見つけて rel=\"lightbox\" を追加してください。
最後に念のために説明しておきますと、メインページだけでなく個別アーカイヴページやカテゴリーページでも Lightbox JS v2.0を適用させたい場合は、各テンプレートを編集しておくのを忘れないようにしましょう。
それと、メインページのある階層の位置と個別アーカイブページのある階層の位置が異なるために「CLOSE」などの画像が表示されない場合があります。その場合は、/js/lightbox.js ファイルを開いて、images/loading.gif などと表示されている個所を相対パスから絶対パスに変えてやれば無事に表示されると思います。5～6何箇所あると思うので、全て編集し直しておきましょう。
以上で第41回は終了です。
参考になりましたらポチっとお願いします♪
