고유 한 클래스가없는 한 페이지에서 여러 개의 깃털 라이트 갤러리

Question

Featherlight 갤러리를 사용하여 여러 갤러리를 호출하려면 어떻게해야합니까? 고유 한 클래스를 사용하지 않고도 갤러리를 사용할 수 있습니까?

나는

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

을 시도하지만 필터가 나는 그것이 않는 생각하는 방식으로 작동합니다 생각하지 않습니다.

현재 - 동일한 갤러리 라이트 박스에있는 페이지의 각 항목을로드합니다. 각 부모에 대해 고유 한 라이트 박스 갤러리가 필요합니다. .image-gallery. 즉, 첫 번째 라이트 박스 갤러리의 화살표를 클릭해도 두 번째 갤러리의 사진이 표시되지 않습니다.

<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를 선택 (문자열)입니다.