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

 

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

 

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

 

LightBox2とは

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

 

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

 

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

 

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

 

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

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

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

 

外部ページLightBox2公式サイト

 

 

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

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

 

 

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

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

 

 

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

 

 

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

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

 

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

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

 

「LightBox2」のオプション

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

 

オプションの設定の仕方

 

オプション名 デフォルト値 説明
fadeDuration 500ms LightBox表示の開始と終了に要する時間(ミリ秒)
fitImagesInViewport true trueの場合、画像が大きい場合縮小して表示
maxWidth なし 画像の最大幅
maxHeight なし 画像の最大高さ
positionFromTop 50 トップからの画像までのピクセル数
resizeDuration 700ms 画像サイズが違う時の画像表示にかかる時間(ミリ秒)
showImageNumberLabel true trueの場合、画像番号と画像総数を表示する(例 image 1 of 3)
wrapAround false trueの場合、最後の画像に来た時、ナビゲーションを表示して最初の画像に移ることができる

 

 

おすすめの記事