jQueryのプラグイン「Lightbox2」を使用したので設置方法を記載します。
Lightboxは画像やリンクなどをクリックした際に、
ウィンドウ内で画像を拡大表示することができるプラグインです。
以前は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>
とても簡単に設置することができるので、
拡大して表示したい画像がある場合などはおすすめです。