Magnific Popup プラグインでinlineでギャラリー表示させる方法

Question

今まで画像をギャラリー表示していたHTMLページをインラインで画像とテキストを表示させるように変更したいです。

https://gimmicklog.com/jquery/180/#i-4

上記のページを参考にして以下のようにしました。

$(function () {
  $('.popup-modal').magnificPopup({
    type: 'inline'
  });
  //閉じるリンクの設定
  $(document).on('click', '.popup-modal-dismiss', function (e) { 
    e.preventDefault();
    $.magnificPopup.close();
  });
});

<a class="popup-modal" href="#inline-wrap">インライン情報を表示</a>
<div id="inline-wrap" class="mfp-hide">
  <h1>画像とテキストを表示</h1>
  <div class="image"><img src="../images/modal/01.jpg"></div>
  <p>キャプションを付けたい時なんかに便利です。</p>
  <p class="popup-modal-dismiss"><a href="#">閉じる</a></p>
</div>

ポップアップの指定を２つにしても、１つ目しかポップアップしないことに気づき、

javascriptにギャラリーのオプションをtrueで追加したのですが、1枚目しか表示されません。

$(function () {
  $('.popup-modal').magnificPopup({
    type: 'inline',
    gallery: {
		enabled:true
    }
  });
  //閉じるリンクの設定
  $(document).on('click', '.popup-modal-dismiss', function (e) { 
    e.preventDefault();
    $.magnificPopup.close();
  });
});

HTMLを見ると、クリックして表示しようとしているエリアがid="inline-wrap"としているので、複数指定できないからなのかと思うのですが、修正する方法が検討つかず悩んでおります。

Answer 1

idで使用する名称を同じにしたことがダメだったので、それぞれ違う名前に変更したところギャラリーとして動作しました。

<a class="popup-modal" href="#inline-wrap1">インライン情報を表示</a>
<div id="inline-wrap1" class="mfp-hide">
  <h1>画像とテキストを表示</h1>
  <div class="image"><img src="../images/modal/01.jpg"></div>
  <p>キャプションを付けたい時なんかに便利です。</p>
  <p class="popup-modal-dismiss"><a href="#">閉じる</a></p>
</div>