"Portfolio Gallery with filtering category"
Bootstrap 3.3.0 Snippet by meetshah3795

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="gallery col-lg-12 col-md-12 col-sm-12 col-xs-12"> <h1 class="gallery-title">Gallery</h1> </div> <div align="center"> <button class="btn btn-default filter-button" data-filter="all">All</button> <button class="btn btn-default filter-button" data-filter="hdpe">HDPE Pipes</button> <button class="btn btn-default filter-button" data-filter="sprinkle">Sprinkle Pipes</button> <button class="btn btn-default filter-button" data-filter="spray">Spray Nozzle</button> <button class="btn btn-default filter-button" data-filter="irrigation">Irrigation Pipes</button> </div> <br/> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div> </div> </div> </section>
.gallery-title { font-size: 36px; color: #42B32F; text-align: center; font-weight: 500; margin-bottom: 70px; } .gallery-title:after { content: ""; position: absolute; width: 7.5%; left: 46.5%; height: 45px; border-bottom: 1px solid #5e5e5e; } .filter-button { font-size: 18px; border: 1px solid #42B32F; border-radius: 5px; text-align: center; color: #42B32F; margin-bottom: 30px; } .filter-button:hover { font-size: 18px; border: 1px solid #42B32F; border-radius: 5px; text-align: center; color: #ffffff; background-color: #42B32F; } .btn-default:active .filter-button:active { background-color: #42B32F; color: white; } .port-image { width: 100%; } .gallery_product { margin-bottom: 30px; }
$(document).ready(function(){ $(".filter-button").click(function(){ var value = $(this).attr('data-filter'); if(value == "all") { //$('.filter').removeClass('hidden'); $('.filter').show('1000'); } else { // $('.filter[filter-item="'+value+'"]').removeClass('hidden'); // $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden'); $(".filter").not('.'+value).hide('3000'); $('.filter').filter('.'+value).show('3000'); } }); if ($(".filter-button").removeClass("active")) { $(this).removeClass("active"); } $(this).addClass("active"); });

Related: See More


Questions / Comments:

what is this code for?? you are not using the class named "active"

if ($(".filter-button").removeClass("active")) {

$(this).removeClass("active");

}

$(this).addClass("active");

aldaba316 (-1) - 4 months ago - Reply 0


For toggle active class is better add inside function click:

$(this).siblings().removeClass('active');

$(this).toggleClass('active');

natuchasca (-3) - 4 months ago - Reply -3


Active class is not working(has not been added).

rajibp (0) - 3 weeks ago - Reply 0


how can make first view, show no items?

DarrenBrown (-3) - 5 months ago - Reply -3


is it possible for an image to have mulitiple filter criteria? for instance my animal gallery 1 picture could be filtered using 'dogs' and 'doberman' and if the user clicks dogs or doberman this pic would show up.

ZaakaJarimbo (0) - 4 weeks ago - Reply 0


Please How can I remove All and make HDPE pipes active

benj2018 (0) - 1 month ago - Reply 0


Hello,

this portfolio gallery is very much useful but a:focus and a:active don't working well with all browsers expecialy in safari and firefox.

Its possible add class and remove to the script for this purpose work right way with all browsers.

with thank by Otto

otikk (0) - 1 month ago - Reply 0