javascript Magnific Popup 的自定义标题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21281263/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Custom title for Magnific Popup
提问by radu.luchian
I'm trying to get Magnific Popup to display a title based on other elements around the target it uses. Given the following markup, I want the title to be "Foobar".
我试图让 Magnific Popup 显示基于它使用的目标周围其他元素的标题。鉴于以下标记，我希望标题为“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've tried while looking for solutions online (including this one on StackOverflow) is the following code:
我在网上寻找解决方案时尝试过的（包括StackOverflow上的这个）是以下代码：
$('.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}
});
Figuring the function might have been an issue I've even tried to simply return a constant string, but that seemed to do nothing:
计算函数可能是一个问题，我什至试图简单地返回一个常量字符串，但这似乎什么也没做：
titleSrc: function(item) {
return "fake Foobar";
}
Does anyone have any clues as what I'm doing wrong?
有没有人知道我做错了什么？
NOTE:It does work if I use titleSrc: 'title', but that's not the behavior I want, as it makes me have to duplicate content in the markup.
注意：如果我使用titleSrc: 'title'，它确实有效，但这不是我想要的行为，因为它使我不得不在标记中复制内容。
回答by krizna
As per documentation titleSrc:{}should be inside image:{}and you can use item.el.parents()instead of item.el.parent().
根据文档titleSrc:{}应该在里面image:{}，你可以使用item.el.parents()而不是item.el.parent().
Corrected 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();
}
}
});
回答by Abhinav Singh
My designed required me to have a title & description with each Image slide hence I required a custom title in magnific popup, I tried the answer from @krizna but I was only getting the title, to debug I went into js file of the magnefic popup (jquery.magnefic-popup.js) and found the function which gets called when custom Markup is parsed it is called appropriately "_getTitle".It get an item object as parameter.I logged this item object to find it had data attribute in which our item parameter goes.
我的设计要求我对每个图像幻灯片都有一个标题和描述，因此我需要在放大弹出窗口中自定义标题，我尝试了@krizna 的答案，但我只得到了标题，为了调试，我进入了放大弹出窗口的 js 文件(jquery.magnefic-popup.js) 并发现在解析自定义标记时调用的函数被适当地称为“_getTitle”。它获取一个项目对象作为参数。我记录了这个项目对象以发现它有数据属性，其中我们的项目参数去。
I initialised the popup using items option (3rd way to initialise in the docs) here is my custom item object
我使用 items 选项初始化弹出窗口（在文档中初始化的第三种方式）这里是我的自定义项目对象
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\'s 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 of image, a title & a description , now my titleSrc function is
每个项目都有图像的 src、标题和描述，现在我的 titleSrc 函数是
titleSrc: function(item) {
return '<p id="gallery-image-title">' + item.data.title +'</p>' + '<p id="gallery-image-description">' + item.data.description +'</p>';
}
I also modified the "_getTitle" function because it only parsed title property in item object(commented the first two lines), my "_getTitle" now looks like this
我还修改了“_getTitle”函数，因为它只解析了 item 对象中的 title 属性（注释了前两行），我的“_getTitle”现在看起来像这样
_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 markup & have 2 dynamic src for title property.
现在我可以控制标记并拥有 2 个用于 title 属性的动态 src。
