How to customize arrows and close button?

Question

I would like to customize and position (replace with custom images jpg/png) the arrows & close button. Any help would be appreciated.

Answer 1

A little late maybe but I found something out: magnific-popup apparently is not straight-forward in the case of positioning buttons.

It has the option closeBtnInside that should place the close button inside the content. In my case this option just did not work (when displaying images). I then tried to change the CSS by setting top and right for the class mfp-close to position the close button. It seemed to work at first, but when clicking the button it moved back to the old position. Did not find other CSS classes that may have to be changed as well.

I ended up setting the HTML for the close button myself (that includes setting an own image) and positioning the close button using an inline style:

var magnificPopupOptions =
{
   delegate: 'a',
   type: 'image',
   closeMarkup: '<button title="%title%" class="mfp-close" style="position: absolute; top: 30px; right: -15px"><img src="/Content/images/close-icon.png" width="25" height="29"/></button>',
};
$('<Selector>').magnificPopup(magnificPopupOptions);

Should work for the arrow buttons too.