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”错误（当通过jQuery('.caption').magnificPopup()实例化magnificPopup而不是{{1}时，似乎不会发生这种错误}}）。但是，我需要在弹出窗口中显示标题HTML。

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

Answer 1

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

要在弹出窗口中获取标题，我在名为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);
});

magnific popup：通过单击图像以外的其他内容打开

1 个答案: