放大弹出窗口：通过单击图像以外的其他内容打开

Question

客户要求图像标题完全覆盖悬停时的缩略图，因此我现在需要能够单击标题以打开 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）。

它给了我两个拦截器：

1. 总是弹出第一张图片，而不是点击的图片。
2. 关于return item.el.clone(); 的那部分被注释掉了，因为它会产生“item.el is undefined”错误（当通过jQuery('.caption').magnificPopup() 而不是jQuery.magnificPopup.open() 实例化magnificPopup 时似乎不会发生这种情况）。但是，我还需要标题 HTML 以显示在弹出窗口中。

任何帮助将不胜感激。谢谢。

Answer 1

当您使用项目数组时，您可以传递要显示的第一个项目的索引。所以我使用var index = jQuery(this).parent().index() 来获取当前点击项的索引，然后将该变量传递给magnificPopup 函数。

为了在弹出窗口中获取标题，我向名为 titleSrc 的项目对象添加了一个额外的属性，然后您可以使用 item.data.titleSrc 在 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);
});