1.1K
Jquery Isotope Tabs Filter with Load More Button
Hello to all, welcome to therichpost.com. In this post, I will do, Jquery Isotope Tabs Filter with Load More Button.
Here is the working code and please use this carefully:
1. Here is the complete HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Filter Tabs</title>
</head>
<style>
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
.portfolioFilter {
padding: 15px 0 40px 0;
}
.portfolioFilter a {
margin-right: 6px;
color: #666;
text-decoration: none;
border: 1px solid #ccc;
padding: 4px 15px;
border-radius: 50px;
display: inline-block;
}
.portfolioFilter a.current {
background: #1e1e1e;
border: 1px solid #1e1e1e;
color: #f9f9f9;
}
img {
max-width:100%;
width:100%;
}
.isotope-item {
z-index: 2;
}
.filterTabs { max-width: 1080px; width:100%; padding:0px 15px; margin:0px auto; }
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
.isotope,
.isotope .isotope-item {
/* change duration value to whatever you like */
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
transition-property: transform, opacity;
}
.col-4 {width: 33.33%; float: left; padding:0px 15px; box-sizing: border-box; margin-bottom: 20px; }
.whiteBox {background-color: #fff; padding:15px; height:400px;}
.greyBg { background-color: #e7e7e7; padding:40px 0; }
.w-70 { width: 70px; }
.d-flex { display: flex; }
.totalHome h6 { margin:0; font-size: 15px; float: left; color:#144564;}
.totalHome .fa { color:#144564; float:left; margin-right: 7px; }
.viewPlan { margin-top:30px; text-align:center; }
.viewPlan a { padding:12px 25px; text-decoration: none; background-color:#d5b681; color:#fff; font-size: 16px; border-radius: 30px; }
.viewPlan a:hover { background-color: #aa9165 !important; }
</style>
<body>
<div class="greyBg">
<div class="filterTabs">
<div class="row">
<div class="portfolioFilter clearfix">
<a href="#" data-filter="*" class="current">All Categories</a>
<a href="#" data-filter=".angular">Angular</a>
<a href="#" data-filter=".laravel">Laravel</a>
<a href="#" data-filter=".wordpress">Wordpress</a>
</div>
<div class="portfolioContainer">
<div class="col-4 angular isotope-item">
<div class="whiteBox">
<img src="https://cdn.searchenginejournal.com/wp-content/uploads/2019/04/the-seo-guide-to-angular-760x400.png" alt="image">
<h4>Narrabeen</h4>
<div class="totalHome d-flex">
<div class="bed w-70">
<i class="fa fa-bed" aria-hidden="true"></i>
<h6>3</h6>
</div>
<div class="bed w-70">
<i class="fa fa-shower" aria-hidden="true"></i>
<h6>2</h6>
</div>
<div class="bed w-70">
<i class="fa fa-car" aria-hidden="true"></i>
<h6>2</h6>
</div>
</div>
<div class="viewPlan">
<a href="#" class="">View Floor Plan</a>
</div>
</div>
</div>
<div class="col-4 laravel isotope-item">
<div class="whiteBox">
<img src="https://www.lovelyfamilymm.com/blog/sites/default/files/styles/single_post_image/public/2020-03/laravel7_0.jpg" alt="image">
<h4>Narrabeen</h4>
<div class="totalHome d-flex">
<div class="bed w-70">
<i class="fa fa-bed" aria-hidden="true"></i>
<h6>3</h6>
</div>
<div class="bed w-70">
<i class="fa fa-shower" aria-hidden="true"></i>
<h6>2</h6>
</div>
<div class="bed w-70">
<i class="fa fa-car" aria-hidden="true"></i>
<h6>2</h6>
</div>
</div>
<div class="viewPlan">
<a href="#" class="">View Floor Plan</a>
</div>
</div>
</div>
<div class="col-4 angular isotope-item">
<div class="whiteBox">
<img src="https://cdn.searchenginejournal.com/wp-content/uploads/2019/04/the-seo-guide-to-angular-760x400.png" alt="image">
<h4>Narrabeen</h4>
<div class="totalHome d-flex">
<div class="bed w-70">
<i class="fa fa-bed" aria-hidden="true"></i>
<h6>3</h6>
</div>
<div class="bed w-70">
<i class="fa fa-shower" aria-hidden="true"></i>
<h6>2</h6>
</div>
<div class="bed w-70">
<i class="fa fa-car" aria-hidden="true"></i>
<h6>2</h6>
</div>
</div>
<div class="viewPlan">
<a href="#" class="">View Floor Plan</a>
</div>
</div>
</div>
<div class="col-4 wordpress isotope-item">
<div class="whiteBox">
<img src="https://appliedparticletechnology.com/wp-content/uploads/2016/03/wordpress-logo.png" alt="image">
<h4>Narrabeen</h4>
<div class="totalHome d-flex">
<div class="bed w-70">
<i class="fa fa-bed" aria-hidden="true"></i>
<h6>3</h6>
</div>
<div class="bed w-70">
<i class="fa fa-shower" aria-hidden="true"></i>
<h6>2</h6>
</div>
<div class="bed w-70">
<i class="fa fa-car" aria-hidden="true"></i>
<h6>2</h6>
</div>
</div>
<div class="viewPlan">
<a href="#" class="">View Floor Plan</a>
</div>
</div>
</div>
<div class="col-4 angular isotope-item">
<div class="whiteBox">
<img src="https://cdn.searchenginejournal.com/wp-content/uploads/2019/04/the-seo-guide-to-angular-760x400.png" alt="image">
<h4>Narrabeen</h4>
<div class="totalHome d-flex">
<div class="bed w-70">
<i class="fa fa-bed" aria-hidden="true"></i>
<h6>3</h6>
</div>
<div class="bed w-70">
<i class="fa fa-shower" aria-hidden="true"></i>
<h6>2</h6>
</div>
<div class="bed w-70">
<i class="fa fa-car" aria-hidden="true"></i>
<h6>2</h6>
</div>
</div>
<div class="viewPlan">
<a href="#" class="">View Floor Plan</a>
</div>
</div>
</div>
<div class="col-4 wordpress isotope-item">
<div class="whiteBox">
<img src="https://appliedparticletechnology.com/wp-content/uploads/2016/03/wordpress-logo.png" alt="image">
<h4>Narrabeen</h4>
<div class="totalHome d-flex">
<div class="bed w-70">
<i class="fa fa-bed" aria-hidden="true"></i>
<h6>3</h6>
</div>
<div class="bed w-70">
<i class="fa fa-shower" aria-hidden="true"></i>
<h6>2</h6>
</div>
<div class="bed w-70">
<i class="fa fa-car" aria-hidden="true"></i>
<h6>2</h6>
</div>
</div>
<div class="viewPlan">
<a href="#" class="">View Floor Plan</a>
</div>
</div>
</div>
<div class="col-4 angular isotope-item">
<div class="whiteBox">
<img src="https://cdn.searchenginejournal.com/wp-content/uploads/2019/04/the-seo-guide-to-angular-760x400.png" alt="image">
<h4>Narrabeen</h4>
<div class="totalHome d-flex">
<div class="bed w-70">
<i class="fa fa-bed" aria-hidden="true"></i>
<h6>3</h6>
</div>
<div class="bed w-70">
<i class="fa fa-shower" aria-hidden="true"></i>
<h6>2</h6>
</div>
<div class="bed w-70">
<i class="fa fa-car" aria-hidden="true"></i>
<h6>2</h6>
</div>
</div>
<div class="viewPlan">
<a href="#" class="">View Floor Plan</a>
</div>
</div>
</div>
<div class="col-4 laravel isotope-item">
<div class="whiteBox">
<img src="https://www.lovelyfamilymm.com/blog/sites/default/files/styles/single_post_image/public/2020-03/laravel7_0.jpg" alt="image">
<h4>Narrabeen</h4>
<div class="totalHome d-flex">
<div class="bed w-70">
<i class="fa fa-bed" aria-hidden="true"></i>
<h6>3</h6>
</div>
<div class="bed w-70">
<i class="fa fa-shower" aria-hidden="true"></i>
<h6>2</h6>
</div>
<div class="bed w-70">
<i class="fa fa-car" aria-hidden="true"></i>
<h6>2</h6>
</div>
</div>
<div class="viewPlan">
<a href="#" class="">View Floor Plan</a>
</div>
</div>
</div>
<div class="col-4 angular isotope-item">
<div class="whiteBox">
<img src="https://cdn.searchenginejournal.com/wp-content/uploads/2019/04/the-seo-guide-to-angular-760x400.png" alt="image">
<h4>Narrabeen</h4>
<div class="totalHome d-flex">
<div class="bed w-70">
<i class="fa fa-bed" aria-hidden="true"></i>
<h6>3</h6>
</div>
<div class="bed w-70">
<i class="fa fa-shower" aria-hidden="true"></i>
<h6>2</h6>
</div>
<div class="bed w-70">
<i class="fa fa-car" aria-hidden="true"></i>
<h6>2</h6>
</div>
</div>
<div class="viewPlan">
<a href="#" class="">View Floor Plan</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
.grid-sizer {
float: left;
}
.isotope-item {
width: 30%;
padding: 10px;
color:#fff;
}
.box {
width: 100%;
padding-bottom: 65%;
background-color: black;
}
.text-box .box {
background-color: green;
}
.hidden {
display: none;
}
</style>
<!-- JQUERY LIBRARY -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3.0.1/dist/isotope.pkgd.min.js"></script>
<script>
jQuery(document).ready(function($){
var $container = $('.portfolioContainer');
$container.isotope({
itemSelector: '.isotope-item',
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
$('.portfolioFilter a').click(function(){
$('.portfolioFilter .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;
});
//****************************
// Isotope Load more button
//****************************
var initShow = 3; //number of images loaded on init & onclick load more button
var counter = initShow; //counter for load more button
var iso = $container.data('isotope'); // get Isotope instance
//console.log(iso.elemCount);
loadMore(initShow); //execute function onload
function loadMore(toShow) {
$container.find(".hidden").removeClass("hidden");
var hiddenElems = iso.filteredItems.slice(toShow, iso.filteredItems.length).map(function(item) {
//console.log(item.element);
return item.element;
});
$(hiddenElems).addClass('hidden');
$container.isotope('layout');
//when no more to load, hide show more button
if (hiddenElems.length == 0) {
$("#load-more").hide();
}
else {
$("#load-more").show();
};
}
//append load more button
$container.after('<div class="viewPlan"><a href="#" id="load-more">Load More</a></div>');
//when load more button clicked
$(document).on("click", "#load-more", function(e) {
e.preventDefault();
if ($('#filters').data('clicked')) {
//when filter button clicked, set initial value for counter
counter = initShow;
j$('#filters').data('clicked', false);
} else {
counter = counter;
};
counter = counter + initShow;
loadMore(counter);
});
});
</script>
</body>
</html>
6 comments
How can I use this with Wordpress to load more posts?
Hi, you can make custom template then you can use it or you have other requirement?
Its Works For me Thank you
Great and thanks.
What if I need 2 isotope gallery in the same page with “loadmore” button?
Okay I will check that.