ホームページ作成/画像の表示・活用 (HTML,CSS,JavaScript)

サムネイル画像をその場で全画面に拡大表示させる方法

ウェブ上に掲載したサムネイル画像をクリックしたときに、拡大画像を全画面で(ブラウザの描画領域全面に広げて)表示する方法をご紹介。ページ移動することなく拡大画像を全画面で表示できるスクリプト「Intense Images」の使い方を解説。スマートフォンでの操作にも対応。画面と画像との縦横比が異なる場合には、隠れた部分をマウスの動き(またはスワイプ操作)で見ることができる便利な仕様もあってお勧めです。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

画像をその場で拡大表示するスクリプトは多々あるが、もっと大きくしたい

画像をその場で拡大表示するLightbox系スクリプトの表示例

画像をその場で拡大表示するLightbox系スクリプトの表示例

小さな画像をクリックすると、ページ移動することなくその場で拡大画像を表示する……というデザインは、方々のウェブサイトで頻繁に使われています。この機能を提供する代表的なスクリプトの1つに「Lightbox」があり、同種のスクリプトが多数公開されています。過去に記事「別窓を開かずに、その場で拡大画像を表示する方法」でも解説致しました。


 
全画面ほどには拡大されない

その場で拡大表示はできるが、全画面ほどには拡大されない

このLightbox系スクリプトでは、「小さな画像をクリック」→「ページがグレイアウト」→「ページに重なるように拡大画像が表示」→「画像外をクリックすると戻る」という一連の動作になるのが一般的です。

拡大画像を表示するとはいえ、全画面にまで拡大されるわけではありません。拡大された画像をさらにクリックすることで原寸表示ができるなどのオプションは用意されていることがありますが、その場合でも、画面いっぱいに広げるには二段階の操作が必要です。


 

ウェブ上に掲載したサムネイル画像を、『全画面で』拡大表示したい

解像度の高い写真など「可能な限り大きく見せたい」画像では、閲覧者がサムネイル画像をクリックすると同時に、画面いっぱいに拡大して表示したい場合もあるでしょう。

全画面で拡大画像を表示

サムネイルをクリックすると、ブラウザの描画領域の全面に拡大画像を表示

そのような場合にお勧めなのが、「Intense Images」というスクリプトです。JavaScriptで書かれており、わずか8KB弱ながら単独で動作可能という軽量なスクリプトです。

この「Intense Images」使うと、その場で(ページ移動することなく)拡大画像が表示できる点はLightbox系スクリプトと同じですが、Lightboxとは違って、拡大画像をブラウザのウインドウ全面に広げて表示してくれます。


 
閲覧者の端末に関係なく描画領域を最大限に活用して表示
スマートデバイスにも対応

スマートデバイスにも対応 (公式サイト上のサンプルをiPod touchで表示させた例)

この「Intense Images」は、スマートデバイスでの操作にも対応しており、画面に入りきらない部分は、スワイプすることで表示できる仕様になっています。また、PC用ブラウザで閲覧した場合は、マウスを画面の上下左右に動かすことで、スワイプの代わり(自動スクロール)になります。

このように、閲覧者の端末に関係なく、端末の描画領域を最大限に活用して大きく表示できます。


 
拡大画像の上にキャプションを重ねて表示できる
全画面表示の画像には、上からキャプションを重ねて表示できる

全画面表示の画像には、上からキャプションを重ねて表示できる

拡大画像を全画面で表示する際には、右図のように画面の端にタイトルや説明文を重ねて掲載することもできます。

この表示に必要なメタデータは、サムネイル画像の掲載時に、特定の属性名を使ってHTML中に記述しておくだけで指定できます。とても簡単に使えるのが特徴的なスクリプトです。


 

全画面拡大スクリプト「Intense Images」の使い方を解説

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

本記事で作成するサンプルページの表示例

本記事で作成するサンプルページの表示例

本記事で例として製作するページは右図の通りです。実際にブラウザを使って表示を確認してみたい場合は、以下のサンプルページをご覧下さい。
その場で画像を全画面に拡大するサンプル

3つのサムネイル画像をクリックすると、その場で拡大画像が全画面で(ブラウザの描画領域全面に)表示されます。拡大画像の表示中にマウスを上下左右に動かすと、(画面と画像の縦横比の関係で)隠れている部分が見えます。


 
それでは次のページから、画像拡大スクリプト「Intense Images」の使い方を見ていきましょう。
  • 1
  • 2
  • 3
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます