lightbox風プラグインMagnific Popupで指定要素を表示

解説

lightbox風jQueryプラグイン[Magnific Popup]のご紹介です。 lightboxのように同一ウィンドウ内でポップアップして写真などを見せるプラグインです。 画像の表示、ギャラリーの表示、iframeの表示など用途はありますが、 今回は指定要素を表示させる案件があり、このプラグインが一番簡単で、 レスポンシブにも対応していたので使うことにしました。 そのメモを書きたいと思います。 プラグインの配布サイト「http://dimsemenov.com/plugins/magnific-popup/」 表示のサンプル「http://codepen.io/collection/nLcqo//」 下記のデモでは、ID指定した箇所の写真とテキストのインライン要素を表示させるサンプルです。

デモはこちら

⇒ライトプラン 詳細はこちら ライトプラン 詳細はこちら

HTML

上記のサンプルにした場合のHTMLソースです。

    <h2>インラインで要素を表示</h2>
    <a class="popup-modal" href="#inline-wrap">インライン要素を開く</a>
    <div id="inline-wrap" class="mfp-hide">
      <h1>風景</h1>
      <div class="image">
        <img src="iris.jpg" width="481" height="321">
      </div>
      <p>   松森蒼穹(そら)に後光を出せば
        <br>
        <br>   片頬黒い県会議員が
        <br>
        <br>   ひとりゆっくりあるいてくる
        <br>
        <br>    
        <br>   羊歯やこならの丘いちめんに
        <br>
        <br>   ことしも燃えるアイリスの花
      </p>
      <p class="popup-modal-dismiss">
        <a href="#">閉じる</a>
      </p>
    </div>

CSS

CSSは下記のファイルを読み込みます。

<link rel="stylesheet" type="text/css" href="magnific-popup.css"/>
<style>
/*inline*/
#inline-wrap {
    position: relative;
    margin:10px auto;
    max-width: 95%;
    background: #fff;
    padding: 20px;
    text-align:center;
    font-size: 90%;
    font-family:"MS P明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
}
#inline-wrap h1 {
    font-size: 100%;
}
#inline-wrap .image img {
    max-width: 240px;
    height:auto;
}
</style>

jQuery

jQueryは下記のファイルを読み込みます。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.magnific-popup.js"></script>
<script>
//inline
$(function () {
    $('.popup-modal').magnificPopup({
        type: 'inline',
        preloader: false
    });
    $(document).on('click', '.popup-modal-dismiss', function (e) {
        e.preventDefault();
        $.magnificPopup.close();
    });
});
</script>

投稿者:

kishiken

企業務めのWEBデザイナーです。

コメントを残す

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