7

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.

strangerpixel
  • 796
  • 1
  • 11
  • 26

2 Answers2

8
return item.el.find('span').text();
Dmitry Semenov
  • 4,418
  • 2
  • 31
  • 37
-3

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.org/TR/html401/struct/links.html#h-12.2.2

user1440775
  • 1
  • The href is an attribute of the anchor, so it doesn't relate to the parent span, nor does it result in nested anchors. – strangerpixel Apr 10 '14 at 19:49
  • I agree that the href doesn't relate to the span element, but in your html above the anchors appear nested to me. When I ran this in Firefox the captions truncated at the start of the anchor element. Firebug reported an error stating that the anchors are illegally nested. If you managed to get it working correctly I'll need to check my code. – user1440775 Apr 10 '14 at 23:12
  • Apologies - you're quite right. I've tried to find where I implemented this, but couldn't - so I may well not have got it working properly with that markup. This question was more about trying to source a caption from somewhere other than the anchor title. However as you say the problem of how to display links in magnific captions remains. Perhaps one for a new question. – strangerpixel Apr 11 '14 at 11:17
  • I appreciate your response. Time to move on. Happy coding! – user1440775 Apr 11 '14 at 22:04