I am looking to incorporate Magnific Popup with the title displayed above the image.
After going through the documentation and checking out the Image Type section, I found a property called markup that allowed me to position the title above the image using this code snippet:
This yielded the following result:
https://i.sstatic.net/QLWjB.png
However, I noticed that the title was stretching wider than the actual image. Here is how it appeared without modifying the markup:
https://i.sstatic.net/pvKsn.png
Is there a way to ensure that the title does not dictate the width of the window? My goal is for the window to adjust its width based on the image size.
$('.grid').magnificPopup({
delegate: 'a',
type: 'image',
image: {
markup: '<div class="mfp-figure">' +
'<div class="mfp-close"></div>' +
'<div class="mfp-title"></div>' +
'<div class="mfp-img"></div>' +
'<div class="mfp-bottom-bar">' +
'<div class="mfp-counter"></div>' +
'</div>' +
'</div>'
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid">
<a class="popup-link" href="ENTE-611.jpg" data-effect="mfp-zoom-in" title='A lot of text - A lot of text - - A lot of textext - - A lot of text - - A lot of text - - A lot of text - - A lot of text - - A lot of text - - A lot of text - '>
<img class='link img-link' src="ENTE-611s.jpg">
</a>
</div>