「LightBox2」で画像をポップアップ表示するための３ステップ

上のキャプチャのように、画像をエフェクト付きのポップアップで表示したい時、「LightBox2」という既存のjQueryプラグインを活用するのが最適です。

少ない手間で、高品質なポップアップを実現することができます。

ここでは、プラグインのダウンロードから実際のポップアップ表示までの全手順を紹介していきます。

LightBox2とは

画像をポップアップウィンドウで拡大表示する機能をライトボックス機能と言います。

「LightBox2」というプラグインは、その名前の通り、ライトボックス機能をパッケージ化したプラグインです。
少ないWEB知識であっても誰でも実装が簡単に、そして高品質なライトボックスを表示することをコンセプトとしています。

プラグインの中には、すでにライトボックスを表示する機能の他に、各種エフェクト表示用のプログラム、ライトボックスのグループ化を実現するプログラムなどが組み込まれています。

私たちは、このプラグインを使うことによって、HTMLの記述のみで高品質なライトボックスを表示することができるのです。

LightBox2でポップアップを表示する全手順

【STEP1】公式サイトからjsファイルをダウンロードする

まずは、公式サイトからプラグインファイルをダウンロードしましょう。

【STEP2】サーバーにアップロードする

ダウンロードしたzipファイルを解凍します。

解凍したフォルダの「src」というフォルダ中にある、「js」「images」「css」のフォルダをサーバー上にFTP転送でアップロードします。

すでにサーバー上に同じフォルダ名がある場合は、中に入っているファイルのみ転送しましょう。

「FTP転送って何？」という方は以下の記事を参考にしてみてください。

「FileZilla」を使ってサーバーにFTPファイル転送を行う手順

【STEP3】プラグインの読み込みとプログラムの記述

ライトボックス機能を実装したいサイト上で、以下のようなプログラムの記述を行います。

プラグイン読み込みとライトボックス機能のオプションを記述

ポップアップしたい画像の設定

「LightBox2」のオプション

ライトボックス機能のオプションを設定することで、より高度なエフェクトを実装することができます。

オプションの設定の仕方