3/3 サムネイル画像をその場で全画面に拡大表示させる方法 [ホームページ作成] All About

4. サムネイル画像の掲載と、対応する拡大画像の情報を記述

サムネイル画像自体は、img要素を使って記述できます。特に難しい記述方法はありません。公式サイトで使われている例では、CSSの背景画像(background-imageプロパティ)を使ってサムネイルを掲載していますが、そうする必要性は特にないので、本記事でご紹介する例では、より簡単なimg要素を使っています。

■記述方法の概要：
以下のような感じで、サムネイル画像の掲載と、拡大画像の各種情報(＝ファイル名・タイトル・説明文)を掲載します。外側のdiv要素には、拡大画像に関する各種情報を属性値として記述し、内側に含まれるimg要素には、サムネイル画像を指定します。

<div class="(クラス名)" data-image="(拡大画像ファイル名)" data-title="(画像タイトル)" data-caption="(画像説明文)">
   <img src="(サムネイル画像ファイル名)" alt="(代替文字)">
</div>

上記のソースには、下記に示す6項目の情報が含まれます。

1. クラス名： CSSで装飾するためと、スクリプトに拡大対象を示すために必須です。何でも適当なclass名を付けて下さい。複数個列挙する際でも、すべてに共通のclass名を付けます。本記事で作成する例では、すべて「fullscreen-image」というclass名にしてあります。
2. 拡大画像ファイル名： 拡大画像のファイル名を記述します。
3. 画像タイトル： 拡大画像の表示時に、左下に大きく掲載されるタイトル文字を記述します。
4. 画像説明文： 画像タイトルの下に、少し小さく表示される文章を記述します。
5. サムネイル画像ファイル名： サムネイル画像のファイル名を記述します。
6. 代替文字： サムネイル画像が何らかの原因で表示されなかった場合に、代わりに表示される文字列を記述します。

上記の1～4はdiv要素に、5～6はimg要素に記述します。
これら1～6の情報を含んだ「div要素とimg要素のセット」を、必要なだけ列挙できます。

■記述例：
例えば、3つの写真を掲載する場合の記述例は以下の通りです。

<!-- ▼画像1▼ -->
<div class="fullscreen-image" data-image="./photos/fallriver1.jpg"   data-title="急流に落ちる滝"   data-caption="Sample Photograph1 「fallriver1.jpg」1860×1000pixels">
   <img src="./photos/fallriver1mini.jpg" alt="急流に落ちる滝(サムネイル)">
</div>
<!-- ▼画像2▼ -->
<div class="fullscreen-image" data-image="./photos/forestlake2.jpg"  data-title="美しい森と湖"     data-caption="Sample Photograph2 「forestlake2.jpg」1200×1860pixels">
   <img src="./photos/forestlake2mini.jpg" alt="美しい森と湖(サムネイル)">
</div>
<!-- ▼画像3▼ -->
<div class="fullscreen-image" data-image="./photos/forestriver3.jpg" data-title="森の中を流れる川" data-caption="Sample Photograph3 「forestriver3.jpg」1860×1000pixels">
   <img src="./photos/forestriver3mini.jpg" alt="森の中を流れる川(サムネイル)">
</div>