客户要求图像标题在悬停时完全覆盖缩略图，因此我现在需要能够单击标题以打开Magnific Popup（而不是<a>）。到目前为止，我已经能够做到：
JS / jQuery：
jQuery(".caption").on("click", function(event) {
var items = [];
jQuery(".item").each(function() {
items.push( {
src: jQuery(this).find("a").first().attr("href")
} );
});
jQuery.magnificPopup.open({
type: 'image',
gallery: {
enabled: true
},
items: items,
image: {
titleSrc: function(item) {
console.log( item.el );
// return item.el.clone();
}
}
});
});
参见fiddle的示例，以及HTML和CSS（以及同样无法使用的替代JS）。
它给了我两个阻碍：
它始终是第一个弹出的图像，而不是单击的图像。
关于
return item.el.clone();的那部分已被注释掉，因为它会产生“ item.el is undefined”错误（当通过jQuery('.caption').magnificPopup()而不是jQuery.magnificPopup.open()实例化magnificPopup时似乎不会发生）。但是，我也需要字幕HTML才能显示在弹出窗口中。任何帮助，将不胜感激。谢谢。
最佳答案
使用项目数组时，可以传递要显示的第一个项目的索引。因此，我已经使用var index = jQuery(this).parent().index()来获取当前单击项的索引，然后将该变量传递给magnificPopup函数。
为了在弹出窗口中获得标题，我向items对象添加了一个名为titleSrc的额外属性，然后您可以使用titleSrc在item.data.titleSrc选项中进行检索。
https://jsfiddle.net/sjp7j1zx/4/
jQuery(".caption a").on("click", function(event) {
event.stopPropagation();
});
jQuery(".caption").on("click", function(event) {
var items = [];
jQuery(".item").each(function() {
// Pass an extra titleSrc property to the item object so we can use it in the magnificPopup function
items.push( {
src: jQuery(this).find("a").first().attr("href"),
titleSrc: jQuery(this).find('.caption').html()
} );
});
// Get the index of the current selected item
var index = jQuery(this).parent().index();
jQuery.magnificPopup.open({
type: 'image',
gallery: {
enabled: true
},
items: items,
image: {
titleSrc: function(item) {
// get the titleSrc from the data property of the item object that we defined in the .each loop
return item.data.titleSrc;
}
}
// Pass the current items index here to define which item in the array to show first
}, index);
});