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

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） .

它给了我两个障碍：

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

如有任何帮助，我们将不胜感激。谢谢。

Answer 1

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

为了在弹出窗口中获得标题，我在名为 titleSrc 的项目 object 中添加了一个额外的属性，然后您可以在 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);
});

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

magnific popup: open by clicking on something other than the image

javascript

jquery

magnific-popup