настраиваемые стрелки в magnific-popup

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

< 2 of 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 запускать функции предыдущего и следующего изображения

html jquery css magnific-popup
person rdkn    schedule 05.01.2014    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Похоже, я недостаточно внимательно прочитал API

var magnificPopup = $.magnificPopup.instance;

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

где #photo-prev — идентификатор предыдущей кнопки

person rdkn    schedule 06.01.2014

arrow_upward
0
arrow_downward

Я думаю, что это лучшее решение https://codepen.io/dimsemenov/pen/JGjHK

просто внесите небольшое изменение, если хотите добавить его в область счетчика.

this.content.find('div.mfp-bottom-bar').append(this.arrowLeft.add(this.arrowRight));
person Alex Scherbyna    schedule 17.01.2019