Lightboxとは？

Lightboxとは，Webブラウザで同一画面上に画像を上乗せ表示するためのスクリプトのことで，画像をクリックすると黒色半透明の背景画ページを覆い，その上に拡大された画像が真ん中に表示され，画像を閉じると元のページに戻るような動作をする
CSSとJavascriptを用いている

導入方法

① ダウンロード
② ZIPファイルを解凍
③ Lightboxを使いたいページのあるフォルダに解凍したcss，images，jsの各フォルダをサーバーに転送
④ Lightboxを使いたいページのHTMLファイルを編集

</head>の手前に次のタグを挿入

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

</body>の手前に次のタグを挿入

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>

Lightboxを使いたい画像のタグを次のように修正

<a href="画像フォルダ/拡大後のファイル名" rel="lightbox" title="説明文">
<img src="画像フォルダ/拡大前のファイル名">
</a>

複数の場合には次のように修正

<a href="画像フォルダ/拡大後のファイル名" rel="lightbox[グループ名]" title="説明文">
<img src="画像フォルダ/拡大前のファイル名">
</a>

例

※ そのままの設定ではリンクによる画像は原寸のサイズで表示されます

参考サイト

Lightbox2