画像をクリックすると、 別ページに飛ぶことなくその場で拡大表示してくれるjQueryの有名プラグイン「LightBox」を ホームページに実装する方法について、簡単に解説します！
▼ 実装例（画像をクリックすると拡大します）
①「LiteBox Plus+」プラグインのダウンロード
「LightBox Plus+」のダウンロードサイトへ行き、下の方にスクロールすると見える Downloadボタンを押して「lightbox_sample.zip」という.zipファイルをダウンロードしてください。
ダウンロードが済んだら解凍して中身を開いてください。使用するのは「sample」フォルダの中の「resource」フォルダとその中身だけです。
なので「resource」フォルダのみを、自身のホームページのディレクトリに配置してください。これがプラグイン本体となります。
② プラグインを呼び出すHTML行の記述
次に、ダウンロードしたプラグインを呼び出すためのHTML行を記述します。
本機能を追加したいページのhtmlを開き＜head＞＜/head＞内に以下の行を追加してください。
<link rel="stylesheet" type="text/css" href="./resource/lightbox.css" media="screen,tv" />
<script type="text/javascript" charset="UTF-8" src="./resource/lightbox_plus.js"></script>
※ hrefとsrcの部分は「resource」フォルダを置いた場所のパスを選択してください。（./ = 同階層 ../ = 一階層前）
③ 小画像(サムネイル)と拡大画像をリンクさせる
最後に小画像(サムネイル)と拡大後の画像をリンク付けします。
▼ ここでは上にある"実装例"を載せる際に記述した文を用いて解説します
<a href="../images/newtown/prison1_2.png" rel="lightbox[sample]" title="（ここにコメントが入ります）">
<img src="../images/newtown/prison1_2.png" width="150" height="75" class="hp_no7_sample"></a>
<a href="../images/newtown/prison2_1.png" rel="lightbox[sample]" title="（ここにコメントが入ります）">
<img src="../images/newtown/prison2_1.png" width="150" height="75" class="hp_no7_sample"></a>
<a href="../images/newtown/prison2_2.png" rel="lightbox[sample]" title="（ここにコメントが入ります）">
<img src="../images/newtown/prison2_2.png" width="150" height="75" class="hp_no7_sample"></a>
解説：
2行の下部分：拡大前の小画像(サムネイル)の設置行です。普段画像を載せる時と同じ手順でサムネ画像を配置してください。
2行の上部分：拡大後の画像の読み込み文です。＜a＞タグでサムネ画像を一緒に囲んでいるのが分かると思います。 表示する画像はサムネの画像と同じものを選択してください。
- lightbox[sample]という部分は、他の画像とのグループを識別するものです。LightBoxの左右に出る"送りボタン" "戻しボタン"を押すと、"lightbox[ ]"の括弧の中が同じ文字列の画像に切り替わります。
- title=" "のセミコロンで囲んだ中にコメントを入力すると、画像拡大時に下の空欄に同様のコメントが表示されます。(実装例参照)。
以上で実装は完了です！！
アルバムページやスクリーンショット集のページのように、複数枚の画像を載せるページを 作成する際にはとても便利なので、是非実装してみてください！
