인공위성을 이용한 동위 원소 그리드

jquery 플러그인 Isotope로 이미지 갤러리를 필터링하려고하는데, 실제 작업을 필터링 할 수없는 이유가 있지만, 잘못하고있다. 나는 두 개의 클래스 "transition"과 "metal"을 추가했으며, 버튼을 사용하여 각 클래스 중 하나를 가진 이미지를 필터링하려고합니다.인공위성을 이용한 동위 원소 그리드

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta content="IE=edge" http-equiv="X-UA-Compatible"> 
    <meta content="width=device-width, initial-scale=1" name="viewport"> 
    <title>Bootstrap 101 Template</title> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet"> 
</head> 
<body> 

    <div class="button-group filter-button-group"> 
    <button data-filter="*">show all</button> 
    <button data-filter=".metal">metal</button> 
    <button data-filter=".transition">transition</button> 
</div> 
    <div style="padding:50px;">   
<h1>Photography</h1> 
<p>This is an assortment of photographs I have taken.</p> 
    </div> 




    <div class="container-fluid"> 
     <div class="grid"> 
      <div class="grid-sizer col-xs-6 col-sm-4 col-md-3 col-lg-2"></div> 

      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 transition" data-category="transition"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001079221497.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 transition" data-category="transition"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001116000079.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001141038889.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001176452626.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 transition" data-category="transition"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001209214386.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001224117612.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001316404158.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file000132701536.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 transition" data-category="transition"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001376718168.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001454659375.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 transition" data-category="transition"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001545806234.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001565782100.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001601969844.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001608482449.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001625591306.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001637922945.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001706961259.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 transition" data-category="transition"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001735386118.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001750264747.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001792779106.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 transition" data-category="transition"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001817248786.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 transition" data-category="transition"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001896291699.jpg"> 
       </div> 
      </div> 
      <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal"> 
       <div class="grid-item-content"> 
        <img class="img-responsive" src="images/file0001958769599.jpg"> 
       </div> 
      </div> 
     </div> 
    </div> 
      <div class="parallax-window" id="contact" class="parallax-window" data-parallax="scroll" data-image-src="images/nyc-1.jpg"> 
    </div> 
    <div class="parallax-window" id="contact" class="parallax-window" data-parallax="scroll" data-image-src="images/nyc-2.jpg"> 
    </div> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <script src="js/isotope.pkgd.min.js"></script> 
    <script src="js/parallax.min.js"></script> 
    <script> 
    $('.grid').isotope({ 
    itemSelector: '.grid-item', 
    percentPosition: true, 
    masonry: { 
    columnWidth: '.grid-sizer' 
    } 
}); 
     $('.filter-button-group').on('click', 'button', function() { 
    var filterValue = $(this).attr('data-filter'); 
    $grid.isotope({ filter: filterValue }); 
}); 




</script> 
</body> 
</html>

매우 링크없이 도움 :

출처

2016-08-17 Indiana Porter

를 감사하거나 알고 어렵다 jsfiddle하지만 한 가지 선언하지 않은 당신이 변수 $ 그리드입니다 것입니다. 당신의 코드와 같이 선언 된 변수없이이 시도 :

$('.filter-button-group').on('click', 'button', function() { 
var filterValue = $(this).attr('data-filter'); 
$('.grid').isotope({ filter: filterValue }); 
});

또는이이 선언 :

var $grid = $('.grid'); 
$grid.isotope({ 
itemSelector: '.grid-item', 
percentPosition: true, 
masonry: { 
columnWidth: '.grid-sizer' 
} 
}); 
    $('.filter-button-group').on('click', 'button', function() { 
var filterValue = $(this).attr('data-filter'); 
$grid.isotope({ filter: filterValue }); 
});

출처

2016-08-18 01:47:22 Macsupport

감사 sooo를 많이! 당신은 전설입니다! –

인공위성을 이용한 동위 원소 그리드

답변

관련 문제