在magnific-popup中自定义放置的箭头

Question

我想在柜台旁放置箭头，大概是这样的：

＆LT; 2 of 19＆gt;

其中'＆lt;'和'＆gt;'是“figcaption .mfp-bottom-bar”中照片下方的箭头按钮。 由于默认箭头位于.mfp容器中，我不能只是绝对定位它们，因为图片可以有任何高度和宽度，我需要它像素完美。

我有一个非功能性解决方案： 在$（''）。magnificPopup调用中的gallery对象中

{
tCounter: 
"<button title='previous' type='button' class='mfp-arrow mfp-arrow-left mfp-prevent-close'>&lt;</button>" 
+ 
" %curr%/%total% "
+
"<button title='next' type='button' class='mfp-arrow mfp-arrow-right mfp-prevent-close'>&gt;</button>"
}

不幸的是，即使原始箭头仍然有效，这也不会触发任何事情。

所以我想知道：

1. 如何将默认箭头放入HTML中的figcaption？
2. 如何使tCounter中的按钮触发上一个和下一个图片功能

Answer 1

看起来我没有仔细阅读api

var magnificPopup = $.magnificPopup.instance;

$('body').on('click', '#photo-prev', function() {
    magnificPopup.prev();
});

其中#photo-prev是上一个按钮的ID

Answer 2

我认为这是一个更好的解决方案 https://codepen.io/dimsemenov/pen/JGjHK

如果要将其附加到柜台区域，请稍作更改。

this.content.find('div.mfp-bottom-bar').append(this.arrowLeft.add(this.arrowRight));