ページ移動なく、別窓も出さず、その場で拡大画像を表示する方法が便利

たくさんの写真や画像を掲載するアルバム(ギャラリー)ページなどでは、サムネイル画像(縮小画像)だけを並べておき、閲覧者がそれをクリックしたりタップしたりした際にだけ拡大画像を表示するデザインがよく使われています。拡大画像を表示する際には、ポップアップウインドウを出すことなく、ページを移動することもなく、その場で拡大画像を表示させる方法が便利で望ましいでしょう。例えば、下図のような感じです。

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

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


サムネイル画像だけを先に掲載しておくメリット
大きな画像を最初から並べて掲載していると、読み込みに時間がかかる上、全体を見渡しにくくなるデメリットがあります。複数の写真や画像を掲載するページでは、小さなサムネイル画像だけを並べておく方が望ましいでしょう。

ページ移動したり、ポップアップウインドウを使うデメリット
拡大画像に直接リンクしたり、拡大画像用ページを作ってそこにリンクしたりする方法では、アクセス者が拡大画像を見るたびにブラウザのページ移動が発生してしまって操作が面倒です。また、拡大画像をポップアップウインドウの中に表示する方法では、画像を見るたびに別ウインドウが開いてしまって煩わしく感じられます。また、スマートフォンなどのモバイル端末では別のタブが強制的に開かれるため、かなり面倒な操作を強要してしまうことになり不親切です。


 

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

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

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

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


 
その場で拡大画像を表示するスクリプトには、定番のLightbox2の他にも多数が公開されています。機能や使い勝手などで選んで活用するとよいでしょう。ここでは、4つのスクリプトの特長をご紹介いたします。それぞれに使い方を解説した記事がありますので、併せてご参照下さい。

  1. 拡大画像の表示では最も代表的で定番のスクリプト Lightbox2
  2. PCでもスマホでも全画面で拡大画像を表示できる Intense Images
  3. 画像だけでなく何でもモーダル枠内に表示できる Colorbox
  4. jQuery不要で動作し、古いブラウザでも使えるLightbox Plus


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

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

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

定番スクリプトなので、ネット上に解説記事や活用例が多数あり、参考にしやすいメリットがあります。また、CDN経由で読み込めるため、自サイトへの設置は不要です。最も手軽に使える方法と言っても過言ではないでしょう。特に不都合がなければ、このLightbox2を選んでおくのが簡単でお勧めです。

このLightbox2スクリプトの使い方を解説した記事は「画像拡大スクリプトLightboxの簡単な設置方法と使い方」にありますので、ご参照下さい。



 

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

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

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

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

詳しい動作例と使い方は、記事「サムネイル画像をその場で全画面に拡大表示させる方法」で解説しています。



 

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

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

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

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

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


 

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

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

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

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

Lightbox Plusのセットアップ方法や使い方に関しては、本記事の次のページ以降で解説しています。



 

製作者にとっても閲覧者にとっても手軽で便利な拡大表示スクリプト

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