複数のインスタンスで素晴らしいポップアップライトボックスを使用する

Question

jQueryプラグインmagnific popupを使用して、私のウェブサイトからのすべてのアクツクルプレビューに簡単なライトボックスとして追加のコンテンツを表示します。

ただし、最初のポップアップはすべての他のインスタンスが最初のインスタンスコンテンツを開きます。

同じページに表示されている記事リスト/ポップアップ番号が修正されていないことが分かっています。

すべてのポップアップを同じページから区別する方法はありますか？

HTML

<a id="pop" class="popup-with-zoom-anim" href="#small-dialog">More content</a> 

<div id="small-dialog" class="zoom-anim-dialog mfp-hide"> 
.. PHP generated content .. 
</div> 

JS

$('.popup-with-zoom-anim').magnificPopup({ 
    type: 'inline', 
    fixedContentPos: false, 
    fixedBgPos: true,  
    overflowY: 'auto', 
    closeBtnInside: true, 
    preloader: true,    
    midClick: true, 
    removalDelay: 300, 
    mainClass: 'my-mfp-zoom-in' 
}); 

Answer 1

私はちょうどそれを行うための方法を見つけました。これを読んだ人の皆様：

すべてのポップアップに一意の名前を付けるようにしてください。

<a id="pop" class="popup-with-zoom-anim" href="#unique-variable">More content</a> 

<div id="unique-variable" class="zoom-anim-dialog mfp-hide"> 
.. PHP generated content .. 
</div>