I am currently developing a website with a gallery page that utilizes the Magnific Popup plugin. My client has provided lengthy 'captions' for each image, almost like short stories.
To display these captions effectively, I have utilized the title function in MFP. However, I also need to implement a SHOW/HIDE feature for the captions by overlaying them directly on the image using absolute positioning.
Although I have set everything up and modified the MFP JavaScript file to include a div called mfp-description, I am facing an issue where clicking on the button inside the image window does not have any effect. It seems like there might be something within the MFP script preventing this interaction, but I can't pinpoint what it is...
You can view the page here:
Below is the code snippet to handle the click event:
$(".mfp-content").click(function() {
var target = $( event.target );
if (target.is(".mfp-description")) {
$(this).addClass("visible");
};
});
And here is the CSS code for showing the caption:
.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;
}
Any assistance or guidance on resolving this issue would be greatly appreciated! Thank you