画像をクリック・タップで拡大表示する方法が便利

たくさんの写真や画像を掲載するアルバム(ギャラリー)ページなどでは、サムネイル画像(縮小画像)だけを並べておき、閲覧者がそれをクリックしたりタップしたりした際にだけ拡大画像を表示するデザインがよく使われています。

ウェブページ上で拡大画像を表示する際には、ポップアップウインドウを出すことなく、ページを移動することもなく、その場で拡大画像を表示する方法を使うのが手軽で望ましいでしょう。例えば、下図のような感じの動作です。
 
ページ移動なく、ポップアップウインドウも出さず、その場で拡大画像を表示できるLightbox系スクリプトが便利

ページ移動なく、ポップアップウインドウも出さず、その場で拡大画像を表示できるLightbox系スクリプトが便利


サムネイル画像だけを先に掲載しておくメリット
大きな画像を最初から並べて掲載していると、読み込みに時間がかかる上、全体を見渡しにくくなるデメリットがあります。複数の写真や画像を掲載するページでは、小さなサムネイル画像だけを並べて掲載しておき、それらがクリックやタップされた際にだけ拡大画像を表示する動作がおすすめです。そうすると、ページ全体の表示完了までにかかる待ち時間が短く済む上、ページ全体も見渡しやすくなり、分かりやすいページになるメリットがあります。

ページ移動したり、ポップアップウインドウを使うデメリット
拡大画像に直接リンクしたり拡大画像用ページを作ってそこにリンクしたりする方法では、アクセス者が拡大画像を見ようとクリックしたりタップしたりするたびにブラウザのページ移動が発生してしまって操作が面倒です。

また、拡大画像をポップアップウインドウの中に表示する方法では、クリックするたびに別ウインドウが開いてしまって煩わしく感じられます。特にスマートフォンなどのモバイル端末では、画像をタップするたびに別のタブが強制的に開かれてしまうため、かなり面倒な操作をユーザに強いてしまうことになって不親切でしょう。

 

その場で拡大画像を表示させるLightbox系スクリプトは多数ある

その場で拡大すると面倒がない

その場で拡大すると面倒がない

そこで便利なのが、Lightboxに代表されるその場で拡大画像を表示できるスクリプトです。
  • ページを移動することなく、
  • ポップアップウインドウ(別の小画面)も開かず、
  • その場で拡大画像を表示できる
という、とても手軽な拡大画像の表示を実現できます。

 
その場で拡大画像を表示するスクリプトには、定番のLightbox2の他にも多数が公開されています。機能や使い勝手などで選んで活用するとよいでしょう。以下に4つのスクリプトの特長をご紹介いたします。どれもHTMLに簡単な記述を加えるだけで使用でき、さらにCSSやJavaScriptをカスタマイズすることで自在な表示ができます。それぞれに使い方を解説した記事がありますので、併せてご参照下さい。
 
  1. 拡大画像の表示では最も代表的で定番のスクリプト Lightbox2
  2. PCでもスマホでも全画面で拡大画像を表示できる Intense Images
  3. 画像だけでなく何でもモーダル枠内に表示できる Colorbox
  4. jQuery不要で動作し、古いブラウザでも使えるLightbox Plus
 

1. 拡大画像の表示では最も代表的で定番のスクリプト Lightbox2

定番スクリプトなのでネット上に解説記事や活用例が多数あり、参考情報を入手しやすいメリットがあります。動作に必要なファイルはすべてCDN経由で読み込めるため、自サイト上には何のファイルも設置する必要がありません。特に不都合がなければ、このLightbox2を選んでおくのが簡単でお勧めです。
 
画像クリックでその場に拡大画像を表示できる定番スクリプトLightbox2

画像クリックでその場に拡大画像を表示できる定番スクリプトLightbox2


Lightbox2スクリプトの解説記事:
このLightbox2スクリプトの使い方を解説した記事は「画像拡大スクリプトLightbox2の簡単な設置方法&使い方」にありますので、ぜひご参照下さい。HTMLの書き方からカスタマイズ方法まで、わずか1ページで説明しています。とても手軽で簡単です。


 

2. PCでもスマホでも全画面で拡大画像を表示できるIntense Images

単にその場で画像を拡大するだけでなく、拡大画像をブラウザのウインドウ全体(スマートフォンなどモバイル端末の場合は全画面)を最大限に使って表示させたい場合には、Intense Imagesスクリプトが便利です。描画領域のすべてを使って、拡大画像を最大化して見せられます。
 
ブラウザのウインドウ(画面)全体を最大限に使って拡大画像を表示できるIntense Images

ブラウザのウインドウ(画面)全体を最大限に使って拡大画像を表示できるIntense Images


Intense Imagesスクリプトの解説記事:
このIntense Imagesスクリプトの使い方を解説した記事は「サムネイル画像をその場で全画面に拡大表示させる方法」にありますのでご参照下さい。サンプルページと共に、設置方法・読み込み方法・使い方をざっと説明しています。


 

3. 画像だけでなく何でもモーダル枠内に表示できるColorbox

Lightboxと同様の表示形態で、拡大画像だけではなく動画やテキストを含む「別のウェブページまるごと」すらも対象にしてオーバーレイ表示できるのがColorboxスクリプトです。下図のように、まったく別の場所にあるウェブサイトをプレビューするような感じで表示することもできます。
 
画像クリックによる拡大画像だけでなく別ページの内容すらもオーバーレイ表示できるColorbox

画像クリックによる拡大画像だけでなく別ページの内容すらもオーバーレイ表示できるColorbox


Colorboxスクリプトの解説記事:
このColorboxスクリプトの詳しい動作例と使い方は、記事「現在のページ上に、別HTMLの内容を重ねて表示する方法」で解説しています。


 

4. jQuery不要で動作し、古いブラウザでも使えるLightbox Plus

何らかの理由でjQueryを使いたくない場合は、jQuery不要で動作する画像拡大スクリプトを使う手もあります。Lightbox Plusは、Lightboxのような動作をjQueryなしのJavaScriptで実現するスクリプトです。下図のように、Windows XP時代のかなり古いブラウザでも動作します。
 
jQuery不要で、古いブラウザでも動作するLightbox Plus

jQuery不要で、古いブラウザでも動作するLightbox Plus


Lightbox Plusスクリプトの解説記事:
このLightbox Plusスクリプトのセットアップ方法や使い方は、本記事の次のページ以降で解説しています。どうしても古いブラウザを対象にしなければならない場合には、このスクリプトを試してみて下さい。


 

製作者にも閲覧者にも手軽で便利な画像拡大スクリプト4つ

上記では、縮小画像のクリックまたはタップで拡大画像を表示できるスクリプトとして、Lightbox2、Intense Images、Colorbox、Lightbox Plusの4つをご紹介いたしました。ページを移動することなく、別のウインドウを開くこともなく、その場で拡大画像を見せられる点は共通です。その共通仕様に加えてそれぞれに特長がありますから、目的のデザインなどに合わせて選んでみて下さい。

なお、画像を拡大する際に併用すると便利なデザイン方法もいくつかあります。例えば以下の記事も参考にしてみて下さい。

【関連記事】