一時期、多くのサイトで導入され大流行した jQuery プラグイン［Lightbox］の使い方を紹介します。

皆様もうご存知でしょうけれど、念のために動作のサンプルを以下のURLに置いておきます。
画像をクリックすると背景が暗くなり、指定された画像がズームして再表示されます。

Lightbox：サンプル・デモ

まずは公式サイトより、［Lightbox］のデータ一式をダウンロードしてきます。

Lightbox：ダウンロード

ダウンロードした zip ファイルを展開すると、いくつかのフォルダとファイルが解凍されます。
基本的に、使用するのは「js」フォルダの中にある［lightbox.js］と、「css」フォルダの中にある［lightbox.css］、それと「img」フォルダの中の、ベースとなる画像４点（close.png、loading.gif、next.png、prev.png）になります。

また、［Lightbox］は jQuery プラグインですので、忘れずに jQuery 本体（jQuery.js）もダウンロードする必要があります。

jQuery 本家サイトは以下。

jQuery 本家サイト

もし［jQuery.js］をダウンロードして使うのが面倒な場合、Google や Microsoft、または jQuery 本家サイトのウェブ上にホストされたデータを利用することもできます。

手順は以下のとおり。
まずは html ファイルの <head>〜</head> 内の任意の場所に、以下のコードを記述します。

<link rel="stylesheet" href="css/lightbox.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

準備はこれで完了。
各ファイルへのパスは環境に合わせて書き換えてください。

続いて <body>〜</body> 内。［Lightbox］を組み込みたい箇所のアンカー要素に「rel=”lightbox”」を追加します。さらに、「href」プロパティでは拡大表示させたい画像を指定。
具体的には以下のような記述になります。

<p><a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" alt="" width="100" /></a></p>

また、［Lightbox］には画像をグループ化して前後の画像とリンクさせることも可能です。
この場合は、通常「rel="lightbox"」と記述するところを、「rel="lightbox[sample-group]"」と書き換えればＯＫ。

このケースだと「rel="lightbox[sample-group]"」が指定された画像郡がグループ化され、画像の前後（左右）をクリックすると順にプレビューされていくようになります。

文章で説明するのが少々難しいですが、百聞は一見に如かず。
以下よりサンプルをご覧ください。

Lightbox：サンプル・デモ

［Lightbox］の描画は CSS に依存しているため、デザインを調整したい場合は［lightbox.css］を編集することになります。
CSS を理解していれば難なく好みのデザインにカスタマイズできるはずです。

導入も比較的簡単なので、初心者の方もチャレンジしてみてください。