I've been attempting to create a filtering gallery for the past three days without any success. None of the codes I came across, or wrote myself, seem to be working. I am using the bootstrap 4 starter template that comes with the latest JQuery version, so I'm puzzled as to why it's not functioning properly. The JavaScript file is also linked to the HTML.
HTML
<section id="projects" class="padding">
<div class="row">
<div class="d-flex justify-content-center col-12">
<div class="projects-filter">
<button class="btn btn-outline current" data-filter="*">All</button>
<button class="btn btn-outline" data-filter="featured">Featured</button>
<button class="btn btn-outline" data-filter="windmills">Windmills</button>
<button class="btn btn-outline" data-filter="equipment">Equipment</button>
<button class="btn btn-outline" data-filter="craftsmanship">Craftsmanship</button>
</div>
</div>
</div>
<div class="row">
<div class="projects-content d-flex justify-content-center">
<div class="single-project col-4 windmills">
<div class="single-project-image">
<img src="img/projects/alutechnika01.jpg" class="img-fluid">
</div>
<div class="single-project-desc">
<h5>Lorem ipsum</h5>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="single-project col-4 featured">
<div class="single-project-image">
<img src="img/projects/alutechnika01.jpg" class="img-fluid">
</div>
<div class="single-project-desc">
<h5>Lorem ipsum</h5>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="single-project col-4 windmills">
<div class="single-project-image">
<img src="img/projects/alutechnika01.jpg" class="img-fluid">
</div>
<div class="single-project-desc">
<h5>Lorem ipsum</h5>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</div>
</section>
Javascript:
$(window).load(function(){
var $container = $('.projects-content');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
$('.projects-filter button').click(function(){
$('.projects-filter .current').removeClass('current');
$(this).addClass('current');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
return false;
});
});