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

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

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

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

サンプルページの2段目にある「拡大画像の下にキャプションも加える場合」や、3段目にある「複数枚の拡大画像を連続閲覧できるようにする場合」の動作もあわせてご覧ください。

サンプルページはコチラ

◆画像にキャプションを加える方法

拡大画像を表示させたときに、拡大画像の下部にキャプション（説明文）を表示できます。

方法は、キャプションとして表示させたい文字列を、リンク（a要素）のtitle属性に追記するだけです。

例えば、以下のように記述すると、「海へ行ってきた写真」という文字列がキャプションとして、拡大画像の下部に表示されます。

<a href=”sea.jpg” rel=”lightbox” title=”海へ行ってきた写真”><img src=”sea-mini.jpg” alt=”海”></a>

※img要素のalt属性値に指定している「海」の方は、サムネイル画像が何らかの理由で表示されなかった場合に使われる代替文字です。

◆複数の画像をグループ分けする方法

これまでの書き方では、拡大画像は1枚ずつしか閲覧できません。

HTMLソース内にグループ名の記述を追加すると、複数枚の拡大画像を連続して閲覧できるようにできます。

たくさんの写真をカテゴリごとに分けておきたい場合などに便利です。

<a href=”sea1.jpg” rel=”lightbox”><img src=”wd3-m.jpg” alt=”森林3″></a>

上記のように記述すると、

(1) seaグループ（＝rel属性値に lightbox を記述したグループ）

(2) forestグループ（＝rel属性値に lightbox を記述したグループ）

の2つのグループができ、グループ別に拡大画像を連続閲覧できます。

例えば、「海1」の拡大画像が表示されているとき、写真内の右寄りにマウスを載せると、「右向き矢印」が写真に重なるように表示されます。

それをクリックすると、次の写真「海2」の拡大画像が表示されます。

「海2」の拡大画像が表示されているとき、写真内の左寄りにマウスを載せると、「左向き矢印」が表示され、右寄りにマウスを載せると「右向き矢印」が表示されます。

左向き矢印をクリックすると、前の写真「海1」の拡大画像が表示されます。右向き矢印をクリックすると、次の写真「海3」の拡大画像が表示されます。

連続閲覧はグループ単位になるため、「海3」の拡大画像が表示されているときには、（次の「森林1」を表示するための）右向き矢印は表示されません。

「海2」へ戻る「左向き矢印」だけが表示されます。

◆閉じるボタンなどの「Lightbox2を構成する画像」が表示されない場合

Lightbox2のアップロード先によっては、スクリプトの修正が必要です。もし、「閉じる」ボタンや「読込中」を示す画像が表示されない場合は、以下の箇所を修正してみてください。

jsフォルダ内の lightbox.js の50～57行目には以下のように書かれています。

    function LightboxOptions() {
      this.fileLoadingImage = ‘images/loading.gif’;
      this.fileCloseImage = ‘images/close.png’;
      this.resizeDuration = 700;
      this.fadeDuration = 500;
      this.labelImage = “Image”;
      this.labelOf = “of”;
    }

ここで、読込中を示す loading.gif と、閉じるボタン close.png の場所を記述しています。

この場所を、必要に応じて修正してください。

例えば、Lightbox2自体をlightboxフォルダ（ディレクトリ）に入れているなら、51行目と52行目を以下のように修正します。

     this.fileLoadingImage = ‘./lightbox/images/loading.gif’;
     this.fileCloseImage = ‘./lightbox/images/close.png’;

さて、これまで3回に渡って、サムネイル画像から拡大画像を表示させる際に便利な、フリーのスクリプト「Lightbox2」の使い方をご紹介いたしました。

たくさんのサムネイル画像を並べたい場合には、とても便利です。

ぜひ、お試しください。

【ご注意ください】

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

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

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