画像を拡大してポップアップ表示できる”Lightbox2″の使い方

まずは、ソースコードをダウンロードしましょう。 “Lightbox2″のソースコードは“Lightbox2″のGitHubページからZIPファイル形式でダウンロードすることができます。下の図は、”Lightbox2″のGitHubページのスクリーンショットです。古いバージョンのものも載っていますが、最新版が一番上に掲載されています。下図の中で赤い下線を引いた「Source code(zip)」をクリックするとソースコードのZIPファイルをダウンロードすることができます。

ダウンロードしたZIPファイルを展開してできたフォルダの中に「dist」という名称のフォルダがあると思います。 “Lightbox2″を使用するのに必要なファイルは、この「dist」フォルダの中にありますので、次の項目から具体的に必要なファイルや設置方法について紹介していきます。「dist」フォルダの中身は、下の図のようになっており「css」「images」「js」のフォルダがあります。

“Lightbox2″を使用する準備

CSSファイルの設置と読み込み

上記の工程でダウンロードしたZIPファイルを展開してできた「dist」フォルダ内の「css」フォルダの中にある lightbox.css か lightbox.min.css のどちらかを”Lightbox2″を使用するサイトに設置して、”Lightbox2″を使用したいHTMLファイルのheadタグ内で読み込ませます。

HTML

JSファイルの設置と読み込み

“Lightbox2″の動作には、jQueryが必要です。 jQueryを読み込んでいないページで”Lightbox2″を使用したい場合、前述した「dist」フォルダ内の「js」フォルダにある下記の二つのうちどちらかを使用してください。・ lightbox-plus-jquery.js ・ lightbox-plus-jquery.min.js これら二つのファイルには、”Lightbox2″と合わせてjQueryが含まれているため別途jQueryを読み込ませる必要がなくなります。

既にjQueryを読み込んであるページで”Lightbox2″を使用したい場合や、jQueryを別途読み込ませたい場合には、JSのファイルとして下記の二つのうちどちらかを使用してください。・ lightbox.js ・ lightbox.min.js

HTML

「images」フォルダの設置 root_folder/ ├── index.html ├── images/ ├── img/ ├── css/ | ├── lightbox.min.css | └── style.css ├── js/ | └── lightbox-plus-jquery.min.js └── etc. “Lightbox2″で拡大表示させたい画像をHTMLへ設置

“Lightbox2″で拡大表示させたい画像を、aタグの href 属性にパスとファイル名を指定します。合わせて data-lightbox 属性を指定することで画像の拡大表示が可能になります。以下では、画像１枚だけを単体で設置したい場合と、複数の画像をセットで設置したい場合とに分けて記述例を紹介していきます。

画像１枚だけの場合

aタグを設置し、 href 属性に画像へのパスと画像のファイル名を指定します。 data-lightbox 属性に任意の名称を指定します。一枚の画像を複数設置する形にしたいときには、この項目にそれぞれ固有の名称を指定してください。 data-title 属性にキャプションとして表示させたい文字列を指定します。画像を拡大表示した時のキャプションが不要な場合には、記述がなくても大丈夫です。拡大した画像にalt属性を指定したいときは、 data-alt 属性に指定したい文字列を指定します。

複数の画像セットの場合

複数の画像をセットとして使用したい場合、複数のaタグを設置し、 href 属性にそれぞれの画像へのパスと画像のファイル名を指定した上で、 data-lightbox 属性に共通の名称を指定します。

HTML

Image #1 Image #2 Image #3 Image #4

“Lightbox2″のオプション

オプションを設定するときの記述方法

HTML

lightbox.option(< 'resizeDuration': 200, 'wrapAround': true >) 主なオプションの紹介オプション名初期値機能 ‘alwaysShowNavOnTouchDevices’ false この値が”false”の場合、複数の画像セットを拡大表示した時のナビゲーション（左右の矢印）は、マウスをホバーしたときにしか表示されません。スマートフォンなどマウスホバーがないデバイスでナビゲーションを使用したいときには、この値を”true”にしておくとタッチ操作がサポートされたデバイスでは常に左右の矢印が表示されるようになります。 ‘disableScrolling’ false この値が”false”の場合、画像が拡大表示されているときに、背景になっている元のページがスクロールできないようになります。 ‘fadeDuration’ 600 拡大画像の黒背景がフェードイン/フェードアウトするのにかかる時間（ミリ秒）を設定します。 ‘imageFadeDuration’ 600 拡大された画像がフェードイン/フェードアウトするのにかかる時間（ミリ秒）を設定します。 ‘positionFromTop’ 50 拡大された画像が配置される位置を画面トップからのピクセル数で設定します。 ‘resizeDuration’ 700 拡大された画像が切り替わる際にサイズが変化するのにかかる時間（ミリ秒）を設定します。 ‘wrapAround’ false この値が”false”の場合、複数の画像セットを使用しているときの拡大画像にある左右のナビゲーションで最後の画像から１枚目の画像にループすることができません。

ライセンス

対応ブラウザ

“Lightbox2″はChrome、Safari、Firefoxなどの主要ブラウザに対応しています。 Internet Explorerにも対応する必要がある場合には、JSファイルに「lightbox-plus-jquery.js」を利用する必要があるようです。

CDN

“Lightbox2″の動作サンプル

まとめ

コメントを残すコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

saku

Web-sakuの運営係です。このサイトではWeb作成に関する情報をわかりやすくお届けしていきたいと思っています。ご意見やご要望などありましたら、コメントいただけると嬉しいです。

よく読まれている記事日本国内のデバイス別ディスプレイサイズ（解像度）シェア【2026年3月】 Webサイトにグラフを設置することができる”Google Charts”の使い方【基本編】斜めの背景をCSSで作る方法画像を拡大してポップアップ表示できる”Lightbox2″の使い方 WordPressサイトにCSSやJavaScriptのファイルを読み込ませて利用する方法 Archive Twitter HOME > JavaScript/jQuery > 画像を拡大してポップアップ表示できる”Lightbox2″の使い方

📎📎📎📎📎📎📎📎📎📎