0

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

fancybox

LightBox風に画像をポップアップして表示するjQueryのプラグインでColorBoxに似たようなビジュアルになっています。レスポンシブに対応していてカスタマイズも出来るので色々と便利に利用できそうですね。

 

 デモサンプル

1.fancyBoxからファイル一式をダウンロード

fancybox1

fabcyBox -Fancy jQuery Lightbox Alternative

2.jQuery本体とCSS,JSファイルを読み込む

 ▼マウスホイールでも画像を切り替えたい場合には、こちらも読み込んでおきます。

jquery-mousewheelをダウンロード

3.<head>内にポップアップ用スクリプトを記述

4.HTMLを記述

 これで完成です。

★カスタマイズ

 1.ButtonHelper

 

デモサンプル

 

[HTML]

 [JavaScript]

2.ThumbnailHelper

 

デモサンプル

 

[HTML]

[JavaScript]

3.背景の色変更(薄紫色)

 

デモサンプル

 

[HTML]

[JavaScript]

4.aリンクタイトルを外に表示サンプル

 

デモサンプル

 

[HTML]

[JavaScript]

5.画像上の右クリック制御

 

デモサンプル

 

[HTML]

[JavaScript]

6.画像の枠を消す

 

デモサンプル

 

[HTML]

 [JavaScript]

7.フェードで画像を切り替える

 

デモサンプル

 

[HTML]

 [JavaScript]

8.ひとつの画像だけサムネイル表示させ、ギャラリーとして全て見せる

 

デモサンプル

 

[HTML]

 [JavaScript]

9.ページを開いたと同時に画像をポップアップさせる

 

デモサンプル

 

[HTML]

 [JavaScript]

10.ウィンドウに合わせたサイズのポップアップを表示する

 

デモサンプル

 

[HTML]

 [JavaScript]

以上になります。

様々なオプションが備わっているのでサイトの仕様に合わせて使えるのでとても便利ですね。




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

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

mororeco > JavaScript > レスポンシブに対応して画像をポップアップ表示してくれる「fancybox」