レスポンシブWEBデザイン対応のLightbox系プラグインMagnific Popupのご紹介です。
Magnific Popup>はIE 7、8にも対応していて、画像や動画、Modalやメールフォーム、Ajax Popupなどオーバーレイで表示できるコンテンツもかなり豊富ですが、
なんと言っても「レスポンシブWEBデザイン」対応で、ブラウザ伸縮の表示及び、スマホやiPad での閲覧時でも最適なサイズで画像を拡大表示してくれるので、使い勝手の良いプラグインだと思います。
Magnific Popup のダウンロード
以下のページよりMagnific Popupのファイルを一式ダウンロードします。Magnific Popup
Magnific Popup の設置
jqueryファイルと一緒にmagnific-popup.js、magnific-popup.cssのファイルを設置します。|
1 2 3 |
<link rel="stylesheet" href="./magnific-popup/magnific-popup.css" /> <script src="./jquery.min.js"></script> <script src="./magnific-popup/jquery.magnific-popup.min.js"></script> |
画像をLightbox風に表示させる
Magnific Popupのサイトにもデモが掲載されていますが、画像のオーバーレイ表示には色々なエフェクトをかけれるようですし、複数枚の画像をギャラリーとして扱うこともできるようです。その中でも今回はシンプルに画像をLightbox風に表示させる方法を取り上げてみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script src="./magnific-popup/jquery.magnific-popup.min.js"></script> <script> $(document).ready(function() { $('.image-popup-vertical-fit').magnificPopup({ type: 'image', closeOnContentClick: true, mainClass: 'mfp-img-mobile', image: { verticalFit: true } }); }); </script> <a href="./images01.jpg" title="Magnific Popup で画像をLightbox風に表示させる" class="image-popup-vertical-fit"><img src="./images01-s.jpg" /></a> |
image-popup-vertical-fitのコードを付けたa タグリンクをクリックすることで、画像をオーバーレイ表示させることができます。
またaタグリンクのtitleにテキストを入れればキャプションとして表示されます。
Magnific Popup で画像をLightbox風に表示させるデモ
Youtube動画をLightbox風に表示させる
この手のプラグインではお決まりの、Youtube動画をLightbox風に表示させる方法です。※動画についてはスマホの実機で見たことがないのですが、ブラウザを伸縮しても適切なサイズで動画が表示されているので、多分大丈夫でしょう。。。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script src="./magnific-popup/jquery.magnific-popup.min.js"></script> <script> $(document).ready(function() { $('.popup-youtube').magnificPopup({ type: 'iframe', mainClass: 'mfp-fade', removalDelay: 160, preloader: false, fixedContentPos: false }); }); </script> <a class="popup-youtube" href="Youtube動画のリンク"> Youtube動画 </a> |
Youtube動画のリンクにpopup-youtubeを指定します。
Youtube動画をLightbox風に表示させるデモ
Modalやメールフォーム、Ajax Popupなど他の例はMagnific Popupのサイトも合わせて参考にしてみてください。
コメント