Custom Name Magnific Popup

Question

I am trying to get Magnific Popup to display a header based on other elements around the target that it uses. Given the following markup, I want the name to be "Foobar".

<div class="container"> <article> <h2>Foo</h2> <figure> <a href="img/img-1.jpg"> <img src="img/img-1.jpg" /> </a> <figcaption> bar1 </figcaption> </figure> </article> <article> <h2>Foo</h2> <figure> <a href="img/img-2.jpg"> <img src="img/img-2.jpg" /> </a> <figcaption> bar2 </figcaption> </figure> </article> </div> 

What I tried when searching for solutions on the Internet (including on https://stackoverflow.com/a/3/4127/ ) is the following code:

 $('.container').magnificPopup({ delegate: 'article figure a', type: 'image', titleSrc: function(item) { return item.el.parent('article').find('h2').text() + item.el.parent('article').find('figcaption').text(); }, gallery:{enabled:true} }); 

Assuming the function could be the problem, I even tried to just return the constant string, but this seemed to do nothing:

 titleSrc: function(item) { return "fake Foobar"; } 

Does anyone have any clues how I'm doing wrong?

NOTE. This works if I use titleSrc: 'title', but this is not the behavior I want, as it makes me duplicate content in the markup.

Answer 1

According to the documentation, titleSrc: {} should be inside the image: {} , and you can use item.el.parents () instead of item.el.parent ().

fixed code

  $('.container').magnificPopup({ delegate: 'article figure a', type: 'image', gallery:{enabled:true}, image: { titleSrc: function(item) { return item.el.parents('article').find('h2').html() + item.el.parents('article').find('figcaption').html(); } } }); 

Answer 2

My design required me to have a title and description with each image slide, so I needed a custom title in a large popup, I tried the answer from @krizna, but I only got the title to debug. I went into the js file (jquery.magnefic-popup.js) and found a function that is called when user markup is parsed, it is called "_getTitle" accordingly. It receives the item object as a parameter. I registered this object object to find its data attribute, in which our item parameter is located.

I initialized a popup using an element (third way to initialize in docs), here is my custom item object

 items: [ { src: 'https://c6.staticflickr.com/9/8785/16698139093_3c30729f1b.jpg"', title: 'We buy Nike shoes', description:'You might ask, why PhotoSwipe doesn\'t add this code automatically via JS, reason is simple – just to save file size, in case if you need some modification of layout' }, { src: 'https://c2.staticflickr.com/8/7662/17307905305_92ae5081bf_b.jpg"', title: 'You can add HTML code dynamically via JS (directly before the initialization), or have it in the page initially (like it\ done on the demo page)', description:'You might ask, why PhotoSwipe doesn\'t add this code automatically via JS, reason is simple – just to save file size, in case if you need some modification of layout' }, { src: 'https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_b.jpg', title: 'Avoid serving big images (larger than 2000x1500px) for mobile, as they will dramatically reduce animation performanc', description:'You might ask, why PhotoSwipe doesn\'t add this code automatically via JS, reason is simple – just to save file size, in case if you need some modification of layout' } ], 

each item has src images, title and description, now my titleSrc function

 titleSrc: function(item) { return '<p id="gallery-image-title">' + item.data.title +'</p>' + '<p id="gallery-image-description">' + item.data.description +'</p>'; } 

I also changed the function "_getTitle" because it only parsed the title property in the object of the object (commented on the first two lines), my "_getTitle" now looks like this

 _getTitle = function(item) { console.log(item); /*if(item.data && item.data.title !== undefined) return item.data.title;*/ var src = mfp.st.image.titleSrc; if(src) { if($.isFunction(src)) { return src.call(mfp, item); } else if(item.el) { return item.el.attr(src) || ''; } } return ''; }; 

Now I have control over the markup and I have 2 dynamic src properties for title.