我使用的插件是：http ://dimsemenov.com/plugins/magnific-popup/
我想知道是否有办法将标题设置为图像标题以外的内容。我想从特定标签/类中获取标题。
我的结构是这样的：
<a class="image-link" href="path.jpg">
<img src="path.jpg">
<p>Want this as caption</p>
</a>
我认为它是“titleSrc：'title'”参数，但我不知道如何为标题选择 p 标签（如果需要，可以附加一个类或 id）。
任何帮助将非常感激。
你可以试试
titleSrc: function(item){
return item.el.find('p').text()
}
据我所知，您使用的是单个弹出窗口（一个图像，而不是画廊）。因此，您只需“请求”一次标题，即在打开弹出窗口后（在图库中，每次图像/其他内容更改时，您都需要获取文本）。首先，让我们查看文档并了解如何定义回调： 链接 1
您可以在回调选项中定义回调。除此之外，所有 Magnific Popup 事件也使用 triggerHandler 在目标元素上调度（或者如果元素不存在则记录在文档中）。
$('.image-link').magnificPopup({
// you may add other options here, e.g.:
preloader: true,
callbacks: {
open: function() {
// Will fire when this exact popup is opened
// this - is Magnific Popup object
},
close: function() {
// Will fire when popup is closed
}
// e.t.c.
}
});
看起来“开放”回调正是我们所需要的。您还可以浏览整个列表， - 将来可能会有用。
我们的下一步我将分成3个较小的：
让我们看一下文档的下一部分 - 公共属性。
magnificPopup.st.el // Target clicked element that opened
//popup (works if popup is initialized from DOM element)
这将返回
<a class="image-link" href="path.jpg">
<img src="path.jpg">
<p>Want this as caption</p>
</a>
所以我们可以像这样得到段落的文本
magnificPopup.st.el.find('p')
或者，不定义 magnificPopup 变量，
this.st.el.find('p')
现在您应该选择一个元素来添加此文本。我没有看到您更改了标准标记（如果您愿意，您当然可以这样做，例如当内置标记不够并且您需要添加额外的元素时，您可以在文档中找到一些信息） ，所以我可以建议将图片顶部的标题添加到<div class="mfp-header"></div>. 在这里，另一个公共财产来提供帮助：
magnificPopup.content // direct reference to jQuery DOM element
//that you open in popup
现在让我们改进我们的代码：
callbacks: {
open: function() {
// store the text in imgCaption variable, - if you will need this later on
var imgCaption = this.st.el.find('p');
// append the text to the element
this.content.find('.mfp-header').html(imgCaption);
}
}
所以，你的整个脚本应该是这样的：
jQuery(document).ready(function () {
$('.image-link').magnificPopup({
type:'image',
closeOnContentClick:'true',
mainClass: 'entry',
image: {
titleSrc: function(item) {
return item.el.attr('title')
// Actually, you don't need it now, because the text of paragraph
// plays the title role, but if you need both things, for example
// 'title' for title and <p> for description, you can leave this method
}
},
callbacks: {
open: function() {
var imgCaption = this.st.el.find('p');
this.content.find('.mfp-header').html(imgCaption);
}
}
});
});
希望你能明白。欢迎提出任何问题，将尽力提供帮助。
您titleSrc必须在HTML 中作为属性指定
例如：
<img src="path.jpg" title="Image Title">
为此，您的 jQuery 将是：
image: { titleSrc: 'title' }
您也可以使用data-title代替title. 您可以在此基础上添加更多参数，使用其他data-属性 - 例如标题、.
例如：
<img src="path.jpg" title="Image Title" data-caption="Image Caption">
为此，您的 jQuery 将是：
image: {
titleSrc: function(item) {
return item.el.attr('title') + item.el.attr('data-caption');
}
}
您还可以向函数添加 HTML 样式元素：
image: {
titleSrc: function(item) {
return '<strong>' + item.el.attr('title') + '</strong><br />' + item.el.attr('data-caption');
}
}