带有指向每个元素的多个链接的宏伟弹出式画廊答案

【问题标题】：Magnific Popup gallery with several links to each element带有指向每个元素的多个链接的宏伟弹出式画廊
【发布时间】：2016-07-27 11:13:22
【问题描述】：

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

我想提供一个分页系统，这样您就可以从相邻的帖子移动到上一个和下一个永久链接内容，而无需离开弹出窗口。这很容易通过 Magnific Popup 上的“图库”选项获得：

我创建了一个针对父容器的 Magnific Popup 实例到所有帖子并为子项目选择器使用“委托”选项，这将打开弹出窗口：
```
$('.parent-container').magnificPopup({
  delegate: '.permalink',
  type:'ajax',
  gallery:{
    enabled:true
  }
});
```
每个帖子可能有多个链接具有相同的href，针对相同的永久链接内容、“标题”、“阅读更多”链接、“日期”等。
问题是，对于同一篇文章中的每个链接，都有一个新实例在图库上为相同的永久链接内容创建。因此，当您使用导航箭头在图库中的项目之间移动时，您会看到针对相同href 的每个链接重复相同的内容。

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

【问题讨论】：

不只是将delegate 选择器更改为更具体的东西，例如.post .permalink:first-child吗？
我不认为这是一个具体的问题。每个帖子都有几个项目需要通过弹出窗口定位其永久链接页面（帖子标题、“阅读更多”链接、发布日期等）。每当您使用 delegate 选择器定位这些项目时，Magnific Popup 都会在图库中为每个项目创建此帖子永久链接页面的实例，重复内容。

标签： jquery ajax magnific-popup

【解决方案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();
});

【讨论】：