【ホームページ作成】別窓を開かずに、その場で拡大画像を表示！

ページ移動やポップアップ画面を使わずに
その場で拡大画像を表示する

ポップアップウインドウを表示することなく、ページも移動することなく、その場で拡大画像を表示させる方法があります。

▲ページ移動せずにその場で拡大画像を表示できる

たくさんの写真や画像を掲載するアルバム（ギャラリー）ページでは、 たいていサムネイル画像だけを並べておき、閲覧者がクリックすることで拡大画像を表示させるようなデザインが採用されています。 これは、大きな画像を最初から表示させると、読み込みに時間がかかる上に全体を見渡せなくなるためです。

拡大画像を表示させるには、
(1) 拡大画像に直接リンクする方法、
(2) 拡大画像用ページを作ってそこにリンクする方法、
(3) ポップアップウインドウを作ってそこに表示させる方法
などがあります。

しかし、(1)や(2)の方法では、画像を見るたびにページ移動が発生するため操作が面倒です。 また、(3)の方法では、画像を見るたびに別のウインドウが開いてしまう点が煩わしく感じられるかもしれません。

そこで今回は冒頭でご紹介したように、ページを移動することなく、別ウインドウも開かず、その場で拡大画像を表示させられる方法をご紹介いたします。

「Lightbox」やその類似スクリプトを使う

上記のようなテクニックは、「Lightbox」などのツール（※JavaScript・CSS・画像ファイルのセット）を活用することで簡単に実現できます。
同様の機能を提供するツールはたくさん公開されていますので、機能やサイズなどで選んで活用するとよいでしょう。 今回の記事では、スクリプトやパーツ画像ファイルを含めても合計36.9KBで済み、HTMLへの追記量も少なく、作者の方による日本語の解説もある「Lightbox Plus」を使ってみます。

「Lightbox Plus」を使ったサンプルページはこちら
（別ウインドウで開きます。）

これらのツールは、配布サイトからファイルをダウンロードし、ほぼそのまま自分のウェブスペースにアップロードするだけで使えます。 スクリプトの内容を理解する必要は特にありません。 この効果を適用させたいHTMLファイル内に、数行のソースを追加するだけで使えるのでお手軽です。

それでは、「Lightbox Plus」の使い方を順にご紹介いたします。