スマホでも使えるシンプルなポップアップ「Magnific Popup」

2014年02月26日

画像をポップアップさせる際、LightBox的な何かを利用したい。
対象はレスポンシブサイト。

色々情報をあさってみたものの、スマホの縦画面で表示される際に横に余計なPaddingが設定されているせいで思うように画像を大きく表示できないものが多かった。
設定で変えれば良いのだろうけど、それ以外にも多機能過ぎたりして。

そんな中、SwipeboxというjQueryプラグインが良い感じだったので導入を試みたが、
そもそもファイル群をダウンロードして解凍し、デモファイルをローカルで動かした時点で動作が怪しい...。
公式サイトに上がっているデモは問題なく動いているのだけれど、ダウンロードしたファイルを見るとどうも「閉じる」系の処理がうまくいっていない様子。

早々に諦め、他を物色。
見つけたのはMagnific Popup

magnific-popup.jpg※スクリーンショット

ものすごくシンプルなルックスで、スマホでの拡大時も横幅を綺麗に調整してくれる。
さらに設置時に画像ファイルのアップロードが不要で、動作も軽い。

Build toolから必要に応じてオプションを選び、
出来上がったコードをサイトで利用するか、GitHubでもダウンロードできる。

実際に導入も問題なし。
とにかくレスポンシブでシンプルなLightBox系を探している方にオススメ。

親切丁寧なドキュメントを見れば、オプションも分かります。