Safari 및 Chrome에서 jQuery 동위 원소 필터링이 작동하지 않습니다.

해당 카테고리를 기반으로 WordPress의 게시물을 필터링하기 위해 isotope를 사용하고 있습니다. Firefox에서는 모든 것이 정상이지만 Safari와 Chrome에서는 필터링이 작동하지 않습니다. 필터 항목을 클릭하면 애니메이션이 생성되지 않습니다. 포지셔닝은 훌륭한 크로스 브라우저입니다. Safari와 Chrome 모두 오류 콘솔의 오류를보고하지 않으므로 잘못된 점은 전혀 모릅니다. 자바 스크립트 여기Safari 및 Chrome에서 jQuery 동위 원소 필터링이 작동하지 않습니다.

<div id="gallery-wrapper" style="position: relative; overflow: hidden; height: 1745px;" class="isotope">         
    <div class="child-page-thumb art-exhibitions isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 0px, 0px);"> 
    </div><!-- end .child-page-thumb --> 
    <div class="child-page-thumb art-exhibitions isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(239px, 0px, 0px);"> 
    </div><!-- end .child-page-thumb --> 
    <div class="child-page-thumb art-exhibitions isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(478px, 0px, 0px);"> 
    </div><!-- end .child-page-thumb --> 
    <div class="child-page-thumb historical-photos-exhibition isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(239px, 161px, 0px);"> 
    </div><!-- end .child-page-thumb --> 
    <div class="child-page-thumb historical-photos-exhibition isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(478px, 161px, 0px);"> 
    </div><!-- end .child-page-thumb --> 
    <div class="child-page-thumb historical-photos-exhibition isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 203px, 0px);"> 
    </div><!-- end .child-page-thumb --> 
    <div class="child-page-thumb other-exhibitions isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(239px, 343px, 0px);"> 
    </div><!-- end .child-page-thumb --> 
</div>

필터링되어야

<div id="isotope-nav"> 
    <div class="gallery-fillter-wrapper"> 
     <select class="gallery-filter"> 
      <option>-- Filter galleries --</option> 
      <option data-filter="*" class="isotope-nav-item">All galleries</option>              <option data-filter=".art-exhibitions" class="isotope-nav-item">Art Exhibitions</option> 
                   <option data-filter=".historical-photos-exhibition" class="isotope-nav-item">Historical photos Exhibition</option> 
                   <option data-filter=".other-exhibitions" class="isotope-nav-item">Other exhibitions</option> 
                   <option data-filter=".springtime-in-the-royal-compound" class="isotope-nav-item">Springtime in The Royal Compound</option> 
                   <option data-filter=".summer-at-the-royal-compound" class="isotope-nav-item">Summer at The Royal Compound</option> 
                   <option data-filter=".the-artwork-of-the-month" class="isotope-nav-item">The Artwork of the Month</option> 
                    <option data-filter=".the-regalia" class="isotope-nav-item">The Regalia</option> 
                   <option data-filter=".trh-prince-peter,-prince-philip-and-prince-alexander" class="isotope-nav-item">TRH Prince Peter, Prince Philip and Prince Alexander</option> 
                 </select> 
    </div><!-- end .gallery-filter-wrapper --> 
</div>

항목된다 :

var cell_width = $('.child-page-thumb').outerWidth(); 
var cell_height = $('.child-page-thumb').outerHeight(); 
$container = $('#gallery-wrapper'); 

$container.isotope({ 
    layoutMode: 'masonry' 
}); 

$('#isotope-nav option').click(function(){ 
    $selector = $(this).attr('data-filter'); 
    $container.isotope({filter: $selector}); 
    return false; 
});

출처

2013-12-12 Bojana Šekeljić