サムネイル画像から中央に拡大画像を出す方法(第2回)

こんにちは。All About ホームページ作成ガイドの西村文宏です。

前回は、サムネイル画像から拡大画像を表示させる際に便利な、フリーのスクリプト「Lightbox2」を使うメリットと入手方法をご紹介いたしました。

今回は、その「Lightbox2」をウェブ上に設置する方法をご紹介いたします。

◆「Lightbox2」のアップロード

ダウンロードしたZIPファイル「lightbox2.51.zip」を展開すると、たくさんのファイルが出てきます。

それらのほとんどは説明用のサンプルですから、アップロードの必要はありません。

ウェブ上にアップロードする必要があるファイルは、以下の通りです。

各ファイルを抜き出すのが面倒なら、全ファイルをそのままアップロードしても機能上の問題はありません。

　■imagesフォルダ内：
　　　close.png
　　　loading.gif
　　　next.png
　　　prev.png

　■jsフォルダ内：
　　　jquery-1.7.2.min.js
　　　lightbox.js

　■cssフォルダ内：
　　　lightbox.css

フォルダ構成（フォルダ名やフォルダの位置関係）は崩さずに、そのままアップロードする方が無難です。

つまり、

　・imagesフォルダ内のファイルは「images」という名称のフォルダに、
　・jsフォルダ内のファイルは「js」という名称のフォルダに、
　・cssフォルダ内のファイルは「css」という名称のフォルダに、

それぞれアップロードします。

もし、フォルダ名を変更したり、位置関係を変更してアップロードした場合は、スクリプトやCSSの修正が必要になります。

◆「Lightbox2」を読み込む方法

Lightbox2を使いたいページのhead要素内（～の間）に、以下のような3行を追記します。

<script src=”./js/jquery-1.7.2.min.js”></script>
<script src=”./js/lightbox.js”></script>
<link href=”./css/lightbox.css” rel=”stylesheet”>

1行目は、jQuery本体のスクリプトを読み込む記述です。

2行目は、Lightbox2のスクリプトを読み込む記述です。

3行目は、Lightbox2のCSSを読み込む記述です。

◆「Lightbox2」を呼び出して使用する方法

リンクを作るa要素に「rel=”lightbox”」という属性を加えると、そのリンクがクリックされたときに、Lightbox2が呼び出されるようになります。

例えば、
　　・サムネイル画像のファイル名が「photo-mini.jpg」
　　・拡大画像のファイル名が「photo.jpg」
の場合を考えます。

普通に、
「サムネイル画像がクリックされたら拡大画像が表示される」
ようにするには、以下のようにリンクを記述します。

<a href=”photo.jpg”><img src=”photo-mini.jpg” alt=”写真1″></a>

ここで、Lightbox2を使って

「サムネイル画像がクリックされたらその場で拡大画像が表示される」

ようにするには、上記のソースに

「rel=”lightbox”」

を追記して、以下のように記述します。

<a href=”photo.jpg” rel=”lightbox”><img src=”photo-mini.jpg” alt=”写真1″></a>

この記述によって、「通常のリンク機能」は無効になり、「Lightbox2による拡大画像の表示機能」が有効になります。

なお、JavaScriptが無効な環境では、通常の「画像へのリンク」として機能しますから、特に問題は起こりません。

書き方については、サンプルページのHTMLソースもご参照ください。

サンプルページはコチラ

次回は、オプションの利用方法などをご紹介いたします。

【ご注意ください】

このコンテンツで紹介されているサイトおよびサービス（ツール）は、
アクセストレードが運営するものではありません。必ず使用方法や注意
事項等をよく理解した上で、ご自身の判断のもとでご利用ください。

万が一、損害・トラブル等が生じた場合も、執筆者およびアクセス
トレードは責任を負いかねますので、あらかじめご了承ください。

講師「All About ホームページ作成ガイド　西村 文宏」のコラム一覧