Magnific Popup, показывающий только первый элемент

Question

Новое в использовании jQuery и Magnific Popup - у меня есть сетка изображений, и когда вы нажимаете на изображение, я хочу, чтобы всплывающее окно отображало div с информацией, относящейся к конкретному изображению.

<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 Popup отображает только DIV (.test-всплывающее) из первого элемента сетки.

Answer 1

Это потому, что все ваши элементы .popup имеют одинаковые id ("test-popup"). Итак, когда вы пытаетесь настроить таргетинг на <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>