Monday, November 30, 2020
therichposts@gmail.com
JqueryJquery Isotope

Jquery Isotope Tabs Filter with Load More Button

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.

Jquery Isotope Tabs Filter with Load More Button
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>

 

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

2 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.