レスポンシブに対応して画像をポップアップ表示してくれるjQueryプラグイン「fancybox」

デフォルトサンプル

ButtonHelperサンプル▼ポップアップ上部にヘルプボタンを表示

ThumbnailHelperサンプル▼ポップアップ下部に小サムネイルを表示

背景の色変更(薄紫色)サンプル▼ポップアップ中の背景の色を変更

aリンクタイトルを外に表示サンプル▼aリンクのタイトルをポップアップ下部に表示

画像上の右クリック制御サンプル▼画像上での右クリックを禁止にする。

画像の枠を消したサンプル▼ポップアップした画像の枠を消す。

フェードで画像を切り替えるサンプル▼タイトルを枠内に表示し、画像切り替えをフェードさせたいとき。

１つの画像だけサムネイル表示させ、ギャラリーとして全て見せるサンプル▼サムネイル画像を１つにして複数画像のギャラリーを見せる。

ページを開いたと同時に画像をポップアップさせるサンプル▼ページを開いた時点で画像をひとつでも表示したいとき。

ウィンドウに合わせたサイズのポップアップを表示するサンプル▼ウィンドウサイズにいっぱいに画像を開きたいとき。