Search code examples
jqueryhtmlcssmagnific-popup

custom placed arrows in magnific-popup

I'd like to have arrows placed next to counter, roughly like this:

< 2 of 19 >

where '<' and '>' are the arrow buttons under the photo in "figcaption .mfp-bottom-bar". Since the default arrows are in the .mfp-container, I cannot just absolutely position them, because the picture can have any height and width and I need it to be pixel perfect.

I have one nonfunctional solution: in the gallery object in the $('').magnificPopup call

{
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>"
}

this unfortunately doesn't trigger anything even though original arrows still work.

So I would like to know either:

  1. How can I place the default arrows to the figcaption in the HTML?
  2. How to make the buttons in the tCounter trigger the previous and next picture functions
Solution

  • Looks like I didn't read api carefully enough

    var magnificPopup = $.magnificPopup.instance;

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

    where #photo-prev is id of previous button