Geek Answers Handbook

How to adjust arrows and close button?

I would like to set up and place (replace with custom jpg / png images) arrows and close the button. Any help would be appreciated.

+4
source share
1 answer

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

It has an option closeBtnInsidethat should put a close button inside the content. In my case, this option just didn't work (when displaying images). Then I tried changing the CSS by setting the top and right for the class mfp-closeto place the close button. At first it worked, but by clicking on the button, she returned to her former position. Could not find other CSS classes that could also be modified.

As a result, I myself set the HTML for the close button (including customizing my own image) and positioned the close button using the built-in 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 arrow buttons as well.

+2
source

More articles:


All Articles