おすすめLightbox系スクリプトの使い方 解説記事
サムネイル画像やリンク文字をクリック(またはタップ)することで、その場にモーダルボックスなどを開いて画像を拡大表示できるLightbox系スクリプトは多数あります。どれを採用するのが良いか、どうすれば使えるのかなどは、解説記事を参考にしてみましょう。
縮小画像がクリックまたはタップされた際に、ページ遷移なくその場で拡大画像を表示できるLightbox系スクリプトの概要を紹介。jQueryを使う本家Lightbox、スマホでの全画面表示に便利なIntense Images、画像以外にも使えるColorboxなど、選び方の参考に。
ページ移動せず、ポップアップ窓も出さず、その場で拡大画像を表示できる代表的なスクリプトLightboxの使い方を解説。LightboxはCDN経由で読み込めば自サイトに設置することなく使用可能。スマホでも閲覧可能。Lightboxの簡単な使い方・書き方・カスタマイズ方法をご紹介。
現在表示中のウェブページ全面を暗くグレーアウトさせた上で小さなボックスを重ね、そこに別のHTMLの中身などを表示する方法として、Lightbox系jQueryプラグイン「Colorbox」の使い方を解説。画像や動画だけでなく、ウェブページそのものでもオーバーレイ表示ができます。
サムネイル画像をクリックしたときに、拡大画像を全画面で(ブラウザの描画領域全面に広げて)表示するスクリプト「Intense Images」の使い方を解説。拡大画像を全画面で表示できるので、表示領域を最大限に活用できます。画面の狭いスマートフォンでも画面最大に表示できて便利です。
おすすめLightbox系スクリプト4つの公式ウェブサイト
本家本元 Lightboxスクリプトの公式サイトです。動作サンプルやスクリプト一式のダウンロードができます。(ただし、上記の記事にあるとおりLightboxはCDN経由で読み込めるため、わざわざダウンロードして設置しなくても使えます。)
出典： Lightbox
画像だけでなくウェブページそのものでもオーバーレイ表示できるLightbox系スクリプト「Colorbox」の公式サイトです。動作サンプルの閲覧や、スクリプト一式のダウンロードなどができます。
拡大画像を、小窓(モーダルボックス)ではなく最初から全画面で表示してくれるスクリプト「Intense Images」の公式サイトです。動作サンプルの閲覧ができます。
出典： Intense Images
サムネイルから拡大画像が飛び出てくるアニメーションがおもしろいLightbox系スクリプト「PhotoSwipe」の公式サイトです。原寸より狭い画面では拡大虫眼鏡ボタンでズームできたり、フルスクリーンボタンで全画面表示もできたり、各種シェアボタンも出せるなど、とても多機能です。
サムネイル画像の並べ方
拡大する前には、サムネイル画像(縮小画像)を並べておく必要があります。キャプション(タイトル)を加えた画像を横方向にたくさん並べる掲載方法はいかがでしょうか？ 横に並ぶ数を指定せず、ウインドウサイズに応じて自動的に配置されるリキッドレイアウトで実現する方法を解説しています。
(参考) その他の画像掲載方法
サムネイルをクリックさせて拡大画像を表示するだけでなく、ほかにも様々な画像表示方法があります。それらも参考にしてみてはいかがでしょうか。以下に解説記事を紹介しておきます。
1枚の大きな画像を、ブラウザの画面(ウインドウ)全面に背景画像として掲載する方法をご紹介。ブラウザのウインドウサイズに関係なく、1枚の背景画像が必ず(縦横比を維持したまま)画面全体を覆うように表示。スクリプトは不要で、数行のCSSだけで簡単に実現できます。
サムネイルから拡大画像を見せるのではなく、最初から「閲覧者の画面サイズに合ったサイズで画像を見せる」方法もあります。画像サイズを自動で閲覧環境に合わせたい場合によくある「画像をウインドウ幅に合わせたいが、本来の大きさより拡大はしたくない」などの問題を解決するCSS記述方法を解説。
