Magnific Popup只显示第一个项目

使用jQuery和Magnific Popup的新功能 - 我有一个图像网格，并且当您单击图像时，我想要显示带有与特定图像相关的信息的div的弹出窗口。Magnific Popup只显示第一个项目

<div class="grid"> 
    <div class="grid-item"> 
     <a href="#test-popup" class="open-popup-link"><img class="object open-popup-link" src="i/objects/8/a.jpg" alt="3D Printed Object"></a> 
     <div id="test-popup" class="popup mfp-hide"> 
      <div class="maker-profile"> 
       <img class="headshot" src="i/maker.jpg" alt="Designer of 3D printed object"> 
       <h2>A, aged 8</h2> 
       <h3>Who are you?</h3> 
       <h3>What inspires you?</h3> 
       <h3>What do you like most about design?</h3> 
      </div> 
     </div> 
    </div> 
    <div class="grid-item"> 
     <a href="#test-popup" class="open-popup-link"><img class="object open-popup-link" src="i/objects/8/ab.jpg" alt="3D Printed Object"></a> 
     <div id="test-popup" class="popup mfp-hide"> 
      <div class="maker-profile"> 
       <img class="headshot" src="i/maker.jpg" alt="Designer of 3D printed object"> 
       <h2>Ab, aged 8</h2> 
       <h3>Who are you?</h3> 
       <h3>What inspires you?</h3> 
       <h3>What do you like most about design?</h3> 
      </div> 
     </div> 
    </div> 
    <div class="grid-item"> 
     <a href="#test-popup" class="open-popup-link"><img class="object open-popup-link" src="i/objects/8/f.jpg" alt="3D Printed Object"></a> 
     <div id="test-popup" class="popup mfp-hide"> 
      <div class="maker-profile"> 
       <img class="headshot" src="i/maker.jpg" alt="Designer of 3D printed object"> 
       <h2>F, aged 8</h2> 
       <h3>Who are you?</h3> 
       <h3>What inspires you?</h3> 
       <h3>What do you like most about design?</h3> 
      </div> 
     </div> 
    </div>

而这里的jQuery的 -

$(function() { 
$('.open-popup-link').magnificPopup({ 
    type:'inline', 
    midClick: true 
}) 
});

，当你在网格中点击我的任何图像发生了什么事是（img.object）弹出Magnific酒店仅显示DIV（。测试-弹出）从第一个网格项目。

来源

2014-10-01 hannahcreative

这是因为您所有的.popup元素都具有相同的id（“测试弹出”）。所以当你试图以<a href="#test-popup">为目标时，你最终总是找到第一个。（id在页面中必须是唯一的）。

如果您更改id以使其具有独特性，则不会有任何问题。

<div class="grid"> 
    <div class="grid-item"> 
     <a href="#test-popup-1" class="open-popup-link"><img class="object open-popup-link" src="i/objects/8/a.jpg" alt="3D Printed Object"></a> 
     <div id="test-popup-1" class="popup mfp-hide"> 
      <div class="maker-profile"> 
       <img class="headshot" src="i/maker.jpg" alt="Designer of 3D printed object"> 
       <h2>A, aged 8</h2> 
       <h3>Who are you?</h3> 
       <h3>What inspires you?</h3> 
       <h3>What do you like most about design?</h3> 
      </div> 
     </div> 
    </div> 
    <div class="grid-item"> 
     <a href="#test-popup-2" class="open-popup-link"><img class="object open-popup-link" src="i/objects/8/ab.jpg" alt="3D Printed Object"></a> 
     <div id="test-popup-2" class="popup mfp-hide"> 
      <div class="maker-profile"> 
       <img class="headshot" src="i/maker.jpg" alt="Designer of 3D printed object"> 
       <h2>Ab, aged 8</h2> 
       <h3>Who are you?</h3> 
       <h3>What inspires you?</h3> 
       <h3>What do you like most about design?</h3> 
      </div> 
     </div> 
    </div> 
    <div class="grid-item"> 
     <a href="#test-popup-3" class="open-popup-link"><img class="object open-popup-link" src="i/objects/8/f.jpg" alt="3D Printed Object"></a> 
     <div id="test-popup-3" class="popup mfp-hide"> 
      <div class="maker-profile"> 
       <img class="headshot" src="i/maker.jpg" alt="Designer of 3D printed object"> 
       <h2>F, aged 8</h2> 
       <h3>Who are you?</h3> 
       <h3>What inspires you?</h3> 
       <h3>What do you like most about design?</h3> 
      </div> 
     </div> 
    </div> 
</div>

来源

2014-10-01 23:32:05

哦完美！谢谢。我也注意到，我看到这个错误在控制台“uncaught typeerror undefined不是一个函数”任何想法为什么？ – hannahcreative 2014-10-01 23:43:07

@hannahcreative无法看到与错误相关的JS代码。如果你有链接可以看到它在行动.. – 2014-10-01 23:49:45

Magnific Popup只显示第一个项目

回答

相关问题