jQueryのプラグイン「Lightbox2」を使用したので設置方法を記載します。

Lightboxは画像やリンクなどをクリックした際に、
ウィンドウ内で画像を拡大表示することができるプラグインです。

「Lightbox2」

以前はLightboxを使用する場合、prototype.jsを使わなければいけなかった記憶がありますが、
今のバージョン（2.5以降）ではjQueryだけで設置できるようです。

prototypeとjQueryを共存させると動作がうまくいかないことがあり、
Lightboxをあまり使用していなかったのですが今後活用できそうです。

下記にjQueryのプラグイン「Lightbox2」を使用し、画像の拡大表示をさせた時の設置方法をメモします。

Lightboxのバージョンは「Lightbox v2.7.1」です。

■ Lightbox2の設置方法（使い方）

下記URLより、「Lightbox2」をダウンロードします。

http://lokeshdhakar.com/projects/lightbox2/

ダウンロードした「css」「js」「img」フォルダをサーバにアップロードします。

【共通で読み込むファイル】

jQueryと各ファイルを読み込みます。

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript"  src="./js/lightbox.js"></script>

【HTML】

Lightbox2を使用する画像のリンクに「rel=”lightbox”」を記述します。

<a href="./image/sample.jpg" rel="lightbox"><img src="./image/thumb.jpg" /></a>

また、下記のように記述してもOKです。
aタグに「data-lightbox=”sample”」を追加しています
※「sample」は個別の値で設定します。

<a href="./image/sample.jpg" data-lightbox="sample"><img src="./image/thumb.jpg" /></a>

上記の設定をするだけで、Lightbox2を設置することができます。

■ Lightbox2で画像をグループ化する方法

複数の画像をグループ化して表示させたい場合があります。
下記のように記述するとグループ化することが可能です。

【HTML】

「rel=”lightbox[group]”」を記述します。

<a href="./image/sample1.jpg" rel="lightbox[group]"><img src="./image/thumb1.jpg" /></a>
<a href="./image/sample2.jpg" rel="lightbox[group]"><img src="./image/thumb2.jpg" /></a>
<a href="./image/sample3.jpg" rel="lightbox[group]"><img src="./image/thumb3.jpg" /></a>

または、下記のように記述します。
グループ化する場合「data-lightbox=”group”」の「group」を同じ値で設定します。

<a href="./image/sample1.jpg" data-lightbox="group"><img src="./image/thumb1.jpg" /></a>
<a href="./image/sample2.jpg" data-lightbox="group"><img src="./image/thumb2.jpg" /></a>
<a href="./image/sample3.jpg" data-lightbox="group"><img src="./image/thumb3.jpg" /></a>

■ キャプションを入れる場合

【HTML】

「title=”キャプション”」を記述します。

<a href="./image/sample.jpg" rel="lightbox" title="キャプション"><img src="./image/thumb.jpg" /></a>

または、下記のように記述します。

<a href="./image/sample.jpg" data-lightbox="sample" data-title="キャプション"><img src="./image/thumb.jpg" /></a>

とても簡単に設置することができるので、
拡大して表示したい画像がある場合などはおすすめです。