【jQuery】モバイルにも対応したLightbox以外のモーダルウィンドウプラグイン

簡単で便利なLightboxを探す

画像ギャラリーの写真を拡大するLightboxで、モバイルに対応していて、設置が簡単で操作性たいいものを探してして見つけたものをメモ。

Fancybox

モバイルにも対応していて、設置が簡単。モーダルで表示したら「前へ」「次へ」と画像を切り替えることができ、Youtube、vimeo、GoogleマップのiFrameにも対応している。jQueryが必要。

Link

404 | Fancyapps

https://fancyapps.com/docs/ui/fancybox/
Link

Github - Fancyapps/Fancybox: jQuery Lightbox Script For Displaying Images, Videos And More. Touch Enabled, Responsive And Fully Customizable.

https://github.com/fancyapps/fancybox

CDN

Link

@fancyapps/Ui Cdn By Jsdelivr - A Cdn For Npm And Github

https://www.jsdelivr.com/package/npm/@fancyapps/ui

カスタマイズ参考

オプション設定例等、参考ページ

Link

【jquery】fancybox3のオプションをまとめました - フロントエンドエンジニア日記

https://me2.jp/blog/javascript/jquery_fancybox3_option.html

Lightcase

これもモバイルやYoutubeに対応しているが、Fancyboxの方が使いやすそう。jQueryが必要。

Link

https://cornel.bopp-art.com/lightcase/
Link

Github - Cbopp-Art/Lightcase: The Smart And Flexible Lightbox Plugin.

https://github.com/cbopp-art/lightcase

CDN

Link

Lightcase Cdn By Jsdelivr - A Cdn For Npm And Github

https://www.jsdelivr.com/package/npm/lightcase

Slimbox2

これもjQueryがあれば使えますが、モバイルには対応していません。

Link

Slimbox 2, The Ultimate Lightweight Lightbox Clone For jQuery · Digitalia.be

https://www.digitalia.be/software/slimbox2/

Magnific Popup

これもjQueryがあれば使えます。フォームのモーダルとかに使えて機能も豊富そうです。機会があれば是非使ってみたいです。

Link

Magnific Popup: Responsive jQuery Lightbox Plugin

https://dimsemenov.com/plugins/magnific-popup/

ダウンロードページ

Link

Github - Dimsemenov/Magnific-Popup: Light And Responsive Lightbox Script With Focus On Performance.

https://github.com/dimsemenov/Magnific-Popup

リファレンス参考

Link

Magnific Popup Documentation

https://dimsemenov.com/plugins/magnific-popup/documentation.html

PAGETOP