ユニークなクラスのない1ページに複数のフェザーライトギャラリー

Question

Featherlightギャラリーを使用して複数のギャラリーを呼び出すにはどうすればいいですか？

私は

if($('.image-gallery').length) { 
    $('.image-gallery').featherlightGallery({ 
     variant: 'gal', 
     filter: $(this).find('.featured-image') 
    }); 
} 

を試してみましたが、私は、フィルタが、私はそれがないと思うように動作しないと思います。

現在、同じギャラリーライトボックスのページに各アイテムを読み込みます。私は、各親のためのユニークなライトボックスのギャラリーがほしい.image-gallery。言い換えると、最初のライトボックスギャラリーの矢印をクリックしても、2番目のライトボックスの写真は表示されません。

<div class="image-gallery"> 
    <div class="featured-image" data-featherlight="http://imgurl"><img /></div> 
    <div class="featured-image" data-featherlight="http://imgurl"><img /></div> 
</div> 

<div class="image-gallery"> 
    <div class="featured-image" data-featherlight="http://imgurl"><img /></div> 
    <div class="featured-image" data-featherlight="http://imgurl"><img /></div> 
</div> 

ここにはFiddleがあります。

Answer 1

あなたはかなり近いです。問題は、data-featherlightを使用することで、あなたが望むものではない自動バインディングを使用していることです。自動バインディングをオフにするか、マークアップを変更してください。like this

これらを個別にバインドすることをお勧めします。 （あなたが作業例を提供しなかったので）私がテストしていないが、これは動作するはずです：

$('.image-gallery).each(function(_i, gallery)) { 
    $(gallery).featherlightGallery({ 
     variant: 'gal', 
     filter: '.featured-image' 
    }); 
}) 

注：filterはjQueryのセレクタ（文字列）です。