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.

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.

• javascript
• magnific-popup

2 Answers 2

return item.el.find('span').text();

Thank you. This has proved useful for me. I couldn't get it to work quite like the example though - the problem is with putting an href in the span element. This results in nested a tags, which are illegal in HTML. This W3C document below relates to HTML 4, but I believe the same applies to HTML 5.

http://www.w3/TR/html401/struct/links.html#h-12.2.2