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

Posted 2023-05-07

【中文标题】如何让 magnific-popup 打开内联库中的选定项目？

【英文标题】：How can I make magnific-popup open an selected item in a inline gallery?

【发布时间】：2015-09-20 18:39:31

【问题描述】：

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

但是，我找不到在锚点点击时打开第二个（或除第一个之外的任何元素）的方法。

有没有人使用过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);
    
  
);

【问题讨论】：

您在弹出窗口中有一个锚标记。有一个锚标签。你想打开那个锚标签点击吗？

【参考方案1】：

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

index:2,

列在文档here。

Example Codepen

【讨论】：

我真正需要的是一种动态执行此操作的方法。例如，基于解析被点击的<button> 的某个标签来设置索引。我无法用你的index:2 示例来实现这一点。有什么想法吗？

能否将索引设置为数据属性，然后将该属性用作函数的变量？ codepen.io/stufu/pen/vOdzbe

【参考方案2】：

查看此 Codepen： http://codepen.io/mgo/pen/ykgjb

或者试试我的解决方法：https://codepen.io/jnax/pen/RpyVxx

var clickedButton;
   $('button').click(function()
   clickedButton = $('button').index(this);
   ); //this indexing solution is obviously not the best for all situations

然后，当弹出窗口打开时，转到弹出窗口中的相应索引。

callbacks: 
  open: function()$('button').magnificPopup('goTo',clickedButton)

问题在于，goTo 操作是可见的，尽管我认为它可能被 css 过渡所掩盖

【参考方案3】：

上面的细微变化对我有用

// 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: 'https://css-tricks.com',
    userAvatarUrl_img: 'https://si0.twimg.com/profile_images/1668225011/Gravatar2_bigger.png',
    userLocation: 'Palo Alto, California'
  
];

// initalize popup
 $('button').click(function()
  let index = $('button').index(this);
   console.log("button index",index)
  $(this).magnificPopup( 
  key: 'my-popup', 
  items: data,
  type: 'inline',
 index:index,
  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);
    ,
    open: function() 
      // Will fire when this exact popup is opened
      // this - is Magnific Popup object
      console.log("inside open",index)
    ,
  
);



   );