Search code examples
javascriptjquerycssmagnific-popup

Button inside Magnific Popup (not close)

I'm working on a site that has a gallery page, using the Magnific Popup plugin. The client has come back with huge 'captions' (more like stories) about each image.

I have used the title function in MFP to create and display the caption. But I need to SHOW/HIDE the caption, as a layer placed directly over the image with absolute position.

I have all of this in place - modified the MFP js file to write in a div called mfp-description - which, when clicked should add a new class to the title div with display block - but the button I have created inside the image window does not have any effect. I'm guessing something in the MFP script is stopping this but I can't work out what...

Page is here:

http://www.kindledesign.co.uk/strand/gallery.php

Code to show:

$(".mfp-content").click(function() {
var target = $( event.target );
if (target.is(".mfp-description")) {
$(this).addClass("visible");
};
});

CSS to show:

.mfp-title {
text-align: left;
font-size: .9em;
line-height: 1.3em;
color: #333;
word-wrap: break-word;
padding: 1em 40px 1em 1em; 
background: white;
position: absolute;
bottom: 100%;
display: none;
}
.mfp-title.visible {
display: block;
}

All help greatly appreciated! Thanks

Solution

  • It sounds like you are trying to bind the click event to your .mfp-title before it exists on the page.

    You need to either:

    1. Run your custom JavaScript after the popup initialises (look at the callbacks available in the API section of the docs).

    2. Amend your click event so that it doesn't rely on the element existing in the DOM.

    For (2), it will look something like:

    $(document.body).on('click', '.mfp-description', function(e) {
    $(this).parent().find('.mfp-title').toggleClass('visible');
});

    You mentioned that you customised your version of Magnific. I would avoid amending the plugin code directly: it will make debugging hard and updating in the future a pain. Use the callbacks that are built in to the plugin (i.e. add your markup in Magnific's beforeOpen or open events).