пользовательских размещены стрелки в Magnific-всплывающего окна

Question

Я хотел бы иметь стрелки в пределах досягаемости, чтобы противостоять, примерно так:

< 2 из 19>

где «<» и «>» являются стрелки кнопки под фотографией в «figcaption .mfp-bottom-bar». Поскольку стрелки по умолчанию находятся в контейнере .mfp, я не могу просто их полностью позиционировать, потому что изображение может иметь любую высоту и ширину, и мне нужно, чтобы пиксель был идеальным.

У меня есть одно нефункциональных решение: в галерее объекта в $ («») magnificPopup называют

{ 
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. Как я могу поместить стрелки по умолчанию в figcaption в HTML?
2. Как сделать кнопки в tCounter вызвать предыдущее и следующее изображение функции

Answer 1

Похоже, я не читал апи достаточно тщательно

var magnificPopup = $.magnificPopup.instance; 

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

где # фото-пред есть идентификатор предыдущей кнопка