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

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

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

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

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

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

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

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

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

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

この記事にコメントする

メールアドレスは公開されません。コメントは管理者による承認後に公開されます。

関連記事

静的HTMLページに、Yahoo!ショッピングでの特定ストアからの検索結果を表示したい!という場合。
自社サイトからYahoo!ショッピングへ誘導する場合や、ブログパーツを制作する場合に使える方法です。
PHP等を使わず、HTMLとJavaScriptだけでページ内に挿入可能です。最速5分で出来ます。
続きを読む

jQuery Validation Engineにフォームの必須入力チェックをさせたところ、なぜか、文字を入力しているのに「この項目は必須項目です」というエラーが発生しました。
つまり、フォームに入力しているのに、入力していないというエラーが出てしまったのです。
続きを読む

20140501215608.png

アンドロイド端末をブラウザ上で動作確認する「manymo」のご紹介、そしてjQuery.sidrの不具合など。

続きを読む