Magnific-Popup에서 사용하기 위해 HTML에 인라인 컨텐츠의 갤러리를 정의하려면 어떻게해야합니까?

Question

페이지에 많은 갤러리가 있으며 각각의 버튼에서 실행됩니다. 페이지 옆의 갤러리에서 버튼 옆에 마크 업을 정의한 다음 .mfp-hide을 사용하여 숨길 수 있습니다. 그러나 delegate 키워드를 추가하면 활성화 팝업을 얻을 수 없습니다 (그렇지 않은 경우). 여기

내가 지금까지 가지고있는 코드,

HTML입니다

<div id="gallery1" class="mfp-hide"> 
    <div class="slide"> 
    ... some content for slide 1 ... 
    </div> 
    <div class="slide"> 
    ... some content for slide 2 ... 
    </div> 
</div> 

<p>Blah blah <a href="#gallery1" class="open-gallery-link">view gallery one</a> blah blah ...</p> 

자바 스크립트

$('.open-gallery-link').magnificPopup({ 
    type:'inline', 
    delegate:'.slide', 
    gallery: { 
    enabled: true 
    } 
}); 

그것은 이런 식으로 작동하지 않습니다

Answer 1

, delegate 항상 목표 DOM의 아이를 찾고 있습니다 요소 (귀하의 경우 자식 요소 .open-gallery-link).

당신은 API를 통해 jQuery를 오픈 갤러리를 통해 모든 것을 분석 할 수 있습니다

$('.open-gallery-link').click(function() { 

    var items = []; 
    $($(this).attr('href')).find('.slide').each(function() { 
    items.push({ 
     src: $(this) 
    }); 
    }); 

    $.magnificPopup.open({ 
    items:items, 
    gallery: { 
     enabled: true 
    } 
    }); 
}); 

http://codepen.io/dimsemenov/pen/zvLny