javascript - 如何让 magnific-popup 打开内联画廊中的选定项目？

Question

我正在使用 magnific-popup显示内联图库(带有自定义 HTML 标记)，与示例 here 完全一样.这将打开一个自定义标记库，您可以在其中单击 3 组头像/名称/位置数据。 (试试下面的示例或代码，您就会明白我的意思)。

但是，我找不到通过 anchor 单击打开第二个(或第一个以外的任何元素)元素的方法。

有没有人用过magnific-popup并且是否能够打开第一个元素以外的内联元素？

HTML:

<button style="padding:20px;">Open popup</button>

CSS:

.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 200px;
  margin: 20px auto;
  text-align: center;
}

Javascript:

// Define data for the popup
var data = [
  {
    username: "Brad Frost", // Key "username" means that Magnific Popup will look for an element with class "mfp-username" in markup and will replace its inner HTML with the value.
    userWebsite_href: 'http://www.bradfrostweb.com', // Key "userWebsite_href" means that Magnific Popup will look for an element with class "mfp-userWebsite" and will change its "href" attribute. Instead of ending "href" you may put any other attribute.
    userAvatarUrl_img: 'https://si0.twimg.com/profile_images/1561258552/brad_frost_bigger.png', // Prefix "_img" is special. With it Magnific Popup finds an  element "userAvatarUrl" and replaces it completely with image tag.
    userLocation: 'Pittsburgh, PA'
  },
  {
    username: "Paul Irish",
    userWebsite_href: 'http://paulirish.com',
    userAvatarUrl_img: 'https://si0.twimg.com/profile_images/2910976341/7d972c32f3882f715ff84a67685e6acf_bigger.jpeg',
    userLocation: 'San Francisco'

  },

  {
    username: "Chris Coyier",
    userWebsite_href: 'http://css-tricks.com',
    userAvatarUrl_img: 'https://si0.twimg.com/profile_images/1668225011/Gravatar2_bigger.png',
    userLocation: 'Palo Alto, California'
  }
];

// initalize popup
$('button').magnificPopup({ 
  key: 'my-popup', 
  items: data,
  type: 'inline',
  inline: {
    // Define markup. Class names should match key names.
    markup: '<div class="white-popup"><div class="mfp-close"></div>'+
              '<a class="mfp-userWebsite">'+
                '<div class="mfp-userAvatarUrl"></div>'+
                '<h2 class="mfp-username"></h2>'+
              '</a>'+
              '<div class="mfp-userLocation"></div>'+
            '</div>'
  },
  gallery: {
    enabled: true 
  },
  callbacks: {
    markupParse: function(template, values, item) {
      // optionally apply your own logic - modify "template" element based on data in "values"
      // console.log('Parsing:', template, values, item);
    }
  }
});

Answer 1

将此添加到您的 magnificPopup 函数中，这将在点击时打开第二个项目:

index:2,

在文档中列出 here .

Example Codepen