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>
上記のソースでは、「急流に落ちる滝」・「美しい森と湖」・「森の中を流れる川」の3枚の写真を掲載しています。ブラウザで表示してみると、以下のように見えます。

サムネイル画像をクリックすると、その場で拡大画像を全画面に表示

サムネイル画像をクリックすると、その場で拡大画像を全画面に表示


上記のページを実際にブラウザを使って表示確認してみたい場合は、サンプルページ「その場で画像を全画面に拡大するサンプル」をご覧下さい。HTMLソース中に注釈を含めてありますので、コピー&ペーストする際に参考にして下さい。

サムネイル画像をクリックされた際に、拡大画像を全画面で表示したい

今回は、画像拡大スクリプト「Intense Images」を使って、サムネイル画像をその場で全画面に拡大表示する方法をご紹介致しました。可能な限り画像を大きく見せたい場合や、スマートデバイスにも対応した画像拡大機能を用意したい場合に便利です。ぜひ、活用してみて下さい。

【関連記事】



※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。