Magnificent Popup 첫 번째 항목 만 표시

Question

jQuery 및 Magnificient 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 팝업 만 DIV 표시 (.test-팝업) 첫 번째 그리드 항목에서.

Answer 1

모든 .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>