2013-05-17 13 views
5

magnific-popup galleryを兄弟姉妹に制限するにはどうすればよいですか?最初の.childから画像を開くと、2番目の.childの画像がギャラリーにはないようにします。Magnific-Popup、兄弟をダイレクトする項目を制限する

HTML構造:

<div class="parent"> 
    <div class="child"> 
     <a class="image-link" href="img/red1.jpg"><img src="img/red1.jpg"></a> 
     <a class="image-link" href="img/red2.jpg"><img src="img/red2.jpg"></a> 
     <a class="image-link" href="img/red3.jpg"><img src="img/red3.jpg"></a> 
     <a class="image-link" href="img/red4.jpg"><img src="img/red4.jpg"></a> 
     <a class="image-link" href="img/red5.jpg"><img src="img/red5.jpg"></a> 
    </div> 

    <div class="child"> 
     <a class="image-link" href="img/city1.jpg"><img src="img/city1.jpg"></a> 
     <a class="image-link" href="img/city2.jpg"><img src="img/city2.jpg"></a> 
     <a class="image-link" href="img/city3.jpg"><img src="img/city3.jpg"></a> 
     <a class="image-link" href="img/city4.jpg"><img src="img/city4.jpg"></a> 
     <a class="image-link" href="img/city5.jpg"><img src="img/city5.jpg"></a> 
    </div> 
</div> 

私はMagnific-ポップアップを初期化する方法:

$('.child').magnificPopup({ 
    delegate: '.image-link', 
    type:'image', 
    gallery: { 
     enabled: true 
    } 
}); 

答えて

9

delegateオプションはだけなので、同様に、使用されている場合:

$('.child').each(function() { 
    $(this).magnificPopup({ 
     delegate: '.image-link', 
     type:'image', 
     gallery: { 
      enabled: true 
     } 
    }); 
}); 
+0

これは素晴らしい作品。 @gangを実装すると、 'image-link'クラスが削除され、' delegate: 'a''を使うことができます。 :) – texelate

関連する問題