Indiana Porter Indiana Porter - 3 months ago 15
jQuery Question

isotope grid filtering with masonry

So I'm trying to filter an image gallery with the jquery plugin Isotope, for some reason I can not for the life of me to get the actual filtering to work though, can anyone see what I'm doing wrong. I have added two classes "transition" and "metal" and am trying to use the buttons up top to filter the images which each have one of those classes.

<!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>


would very much appreciate some help :)

Answer

Without a link or jsfiddle it's her to know but one thing is you haven't declared the variable $grid. Try this without the variable declared, as in your code:

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

or this with it declared:

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 });
});