おすすめLightbox系スクリプトの使い方 解説記事

サムネイル画像やリンク文字をクリック(またはタップ)することで、その場にモーダルボックスなどを開いて画像を拡大表示できるLightbox系スクリプトは多数あります。どれを採用するのが良いか、どうすれば使えるのかなどは、解説記事を参考にしてみましょう。

別窓を開かずに その場で拡大画像を表示する4つの方法

縮小画像がクリックまたはタップされた際に、ページ遷移なくその場で拡大画像を表示できるLightbox系スクリプトの概要を紹介。jQueryを使う本家Lightbox、スマホでの全画面表示に便利なIntense Images、画像以外にも使えるColorboxなど、選び方の参考に。

出典: 別窓を開かずに その場で拡大画像を表示する4つの方法 [ホームページ作成] All About

画像拡大スクリプトLightboxの簡単な設置方法と使い方

ページ移動せず、ポップアップ窓も出さず、その場で拡大画像を表示できる代表的なスクリプトLightboxの使い方を解説。LightboxはCDN経由で読み込めば自サイトに設置することなく使用可能。スマホでも閲覧可能。Lightboxの簡単な使い方・書き方・カスタマイズ方法をご紹介。

出典: 画像拡大スクリプトLightboxの簡単な設置方法と使い方 [ホームページ作成] All About

別のHTML等をオーバーレイ表示できるColorboxの使い方

現在表示中のウェブページ全面を暗くグレーアウトさせた上で小さなボックスを重ね、そこに別のHTMLの中身などを表示する方法として、Lightbox系jQueryプラグイン「Colorbox」の使い方を解説。画像や動画だけでなく、ウェブページそのものでもオーバーレイ表示ができます。

出典: 別のHTML等をオーバーレイ表示できるColorboxの使い方 [ホームページ作成] All About

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

サムネイル画像をクリックしたときに、拡大画像を全画面で(ブラウザの描画領域全面に広げて)表示するスクリプト「Intense Images」の使い方を解説。拡大画像を全画面で表示できるので、表示領域を最大限に活用できます。画面の狭いスマートフォンでも画面最大に表示できて便利です。

出典: サムネイル画像をその場で全画面に拡大表示させる方法 [ホームページ作成] All About

おすすめLightbox系スクリプト4つの公式ウェブサイト

1.Lightbox

本家本元 Lightboxスクリプトの公式サイトです。動作サンプルやスクリプト一式のダウンロードができます。(ただし、上記の記事にあるとおりLightboxはCDN経由で読み込めるため、わざわざダウンロードして設置しなくても使えます。)

出典: Lightbox

2.Colorbox - a jQuery lightbox

画像だけでなくウェブページそのものでもオーバーレイ表示できるLightbox系スクリプト「Colorbox」の公式サイトです。動作サンプルの閲覧や、スクリプト一式のダウンロードなどができます。

出典: Colorbox - a jQuery lightbox

3.Intense Images

拡大画像を、小窓(モーダルボックス)ではなく最初から全画面で表示してくれるスクリプト「Intense Images」の公式サイトです。動作サンプルの閲覧ができます。

出典: Intense Images

4.PhotoSwipe: Responsive JavaScript Image Gallery

サムネイルから拡大画像が飛び出てくるアニメーションがおもしろいLightbox系スクリプト「PhotoSwipe」の公式サイトです。原寸より狭い画面では拡大虫眼鏡ボタンでズームできたり、フルスクリーンボタンで全画面表示もできたり、各種シェアボタンも出せるなど、とても多機能です。

出典: PhotoSwipe: Responsive JavaScript Image Gallery

サムネイル画像の並べ方

キャプション付き画像を横向きに並べて配置する方法

拡大する前には、サムネイル画像(縮小画像)を並べておく必要があります。キャプション(タイトル)を加えた画像を横方向にたくさん並べる掲載方法はいかがでしょうか? 横に並ぶ数を指定せず、ウインドウサイズに応じて自動的に配置されるリキッドレイアウトで実現する方法を解説しています。

出典: キャプション付き画像を横向きに並べて配置する方法 [ホームページ作成] All About

(参考) その他の画像掲載方法

サムネイルをクリックさせて拡大画像を表示するだけでなく、ほかにも様々な画像表示方法があります。それらも参考にしてみてはいかがでしょうか。以下に解説記事を紹介しておきます。

1枚の背景画像をブラウザの画面全体に広げる方法

1枚の大きな画像を、ブラウザの画面(ウインドウ)全面に背景画像として掲載する方法をご紹介。ブラウザのウインドウサイズに関係なく、1枚の背景画像が必ず(縦横比を維持したまま)画面全体を覆うように表示。スクリプトは不要で、数行のCSSだけで簡単に実現できます。

出典: 1枚の背景画像をブラウザの画面全体に広げる方法 [ホームページ作成] All About

画像を画面幅に合わせる際、拡大/縮小しすぎを防ぐCSS

サムネイルから拡大画像を見せるのではなく、最初から「閲覧者の画面サイズに合ったサイズで画像を見せる」方法もあります。画像サイズを自動で閲覧環境に合わせたい場合によくある「画像をウインドウ幅に合わせたいが、本来の大きさより拡大はしたくない」などの問題を解決するCSS記述方法を解説。

出典: 画像を画面幅に合わせる際、拡大/縮小しすぎを防ぐCSS [ホームページ作成] All About