I want to take the title for my Magnific images from a hidden caption field inside the anchor tag - NOT from the title. This is because my title contains markup.
HTML
<a href="img/zoom.jpg">
<img src="img/small.jpg" alt="">
<span class="hide">This is a caption with <a href="#">a link</a> in it</span>
</a>
JS
// initialise the magnific lightbox
$('.js-lightbox').each(function() {
$(this).magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
},
image: {
titleSrc: function(item) {
return item.el.text;
},
tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
}
});
});
So obviously the return item.el.text;
isn't working as expected. Thanks.
First you need to include the JS library in your theme. The minified file is quite big, so I am not providing it here. You can find the minified JS file here: https://github.com/dimsemenov/Magnific-Popup/blob/master/dist/jquery.magnific-popup.min.js. Place this JS file in the theme you wish to use.
Get MagnificClick the Releases button in the center of the page. Then download the zip version of the source code for the latest versions. Find the file you downloaded and unzip it. The resulting folder should be called Magnific-Popup-master.
return item.el.find('span').text();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With