Magnific Popup画廊，其中包含指向每个元素的多个链接

Question

我尝试在Tumblr主题上使用 Magnific Popup通过ajax 在弹出窗口中显示每个帖子的固定链接内容，而不是正常加载新页面的行为。

我想提供一个分页系统，因此您可以从相邻的帖子移动到上一个和下一个永久链接内容，而无需离开弹出窗口。这很容易得到＆＃34;画廊＆＃34; Magnific Popup选项：

• 我为Magnific Popup创建了一个针对父容器的实例 发布所有帖子并使用＆＃34; delegate＆＃34;子项选择器的选项，将打开弹出窗口：

  $('.parent-container').magnificPopup({
    delegate: '.permalink',
    type:'ajax',
    gallery:{
      enabled:true
    }
  });
  

• 每个帖子可能包含多个与href相同的链接，定位同一个永久链接 内容，关于＆＃34;标题＆＃34;，on＆＃34;阅读更多＆＃34; link，on＆＃34; Date＆＃34;等

• 问题是针对同一帖子中的每个链接，新实例是 在库中创建了相同的固定链接内容。因此，当您使用导航箭头在图库中的项目之间移动时，您会看到针对相同href的每个链接重复相同的内容。

这是Magnific Popup的预期行为，但是我需要一种方法来避免重复，并且仍然有几个链接指向相同的内容。有办法吗？

Answer 1

我知道这有点老了，但我也遇到了这个问题。我最终做了这个...

HTML：

<article id="element-1">
    <a class="popup-link" href="http://example.com">first link</a>
    <a class="popup-link-fake" href="http://example.com">second link</a>
    <a class="popup-link-fake" href="http://example.com">third link</a>
</article>
<article id="element-2">
    <a class="popup-link" href="http://example.com">first link</a>
    <a class="popup-link-fake" href="http://example.com">second link</a>
    <a class="popup-link-fake" href="http://example.com">third link</a>
</article>
<!-- etc... -->

jQuery：

// call the lightbox on one link element per item
$('.popup-link').magnificPopup({
    type : 'ajax',
    gallery : { enabled : true },
});
// make the other links click that link when clicked
$('.popup-link-fake').on('click',function(e){
    e.preventDefault();
    $(this).closest('article').find('.popup-link').click();
});