画像をオーバーレイで拡大表示させるjavascript『Lightbox』ページ移動せずに画像を拡大して見れるようになったら便利だなあ、このブログでもそういうのできるのかなーと思い、やってみました。Lightbox系プラグインとしてさまざまな種類のスクリプトがあるようなのですが、ここはとりあえず本家の最新版を使ってみることにしました。詳細で述べるように幾つか記述を変更する手間がかかりますが、これは類似のスクリプトでも必要な手順です。ここで紹介している方法は各画像のリンクタグに「rel="lightbox"」を挿入する必要があります。以下では自分のサイトのアドレスを例に説明していますので、適宜各々のサイトアドレスに置き換えて読んでください。公式サイトからdownload。現在の最新版であるv2.51を利用します。ダウンロードしたzipは解凍して中身をアップロードします。zipの中にはlightbox2のデモページも含まれているので必要なファイルだけアップロードします。(デモページはhttp://lokeshdhakar.com/projects/lightbox2/と同じです。「prev.png」の画像ファイル4つ。アップロードする場所を決める(決めてもまだアップロードはしないでください)アップロードする場所ですが、私の場合はlightboxディレクトリを新たに作り、すべてアップロードしました。(seesaaブログの場合ファイルマネージャでディレクトリを作ります。)複数のディレクトリに分けることはせず、そこでまとめて管理することにしました。画像をimageディレクトリに入れてもいいです。cssについては別ファイルではなく、ブログデザインに挿入する方もいるようです。そこら辺は自由に決めてください。アップロードするディレクトリを決めると必要な改変が決まります。seesaaで使う場合に必要な改変。動かすためにはアップロードするファイルのアドレスを正しく指定しなければいけません。seesaaブログはアップロードしたファイルの場所と実際のブログのアドレスが異なります。このブログのアドレス:"http://eltransportador.seesaa.net/"ファイルがある場所:"http://eltransportador.up.seesaa.net/lightbox/"この違いがあるためseesaaブログでは絶対パスで場所を記述する必要があります。改変しなければならない場所はアップロードするファイルで4カ所、HTMLに挿入する分も含めると全部で7カ所あります。変更が必要なファイルは2つ。以下変更する箇所を列記します。