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

Post to Facebook Tweet this

<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

Vue Argon Design System
arrow key navigation thumbnail gallery modal view
masonry Image Gallery
Easy image gallery in a modal

Questions / Comments:

Amazing snippet, I just have one simple question. How can I put the default gallery to be one of the filters , for example when I open this page and I do not want all the images to be shown, just HDE pipes and from there to go around through filters?

Rosen Ivanov () - 7 years ago - Reply 0

did you ever get a response on that somewhere else? I am having the same issue

Dan Gauthier () - 7 years ago - Reply 0

Active class not add remove. click on filter buttons. please help me

Krish () - 7 years ago - Reply -1

Hello, I use this code this morning but for some reason i can't oepn the image in different tabs? any solutions for this?

mika07 () - 2 years ago - Reply 0

javascript not working ..

i create folders like this: css
bootstrap.min.css
style.css

js
jquery.min.js
custom.js
bootstrap.min.js

index.html

js not working please help...

Waris Khan () - 7 years ago - Reply 0

The same problem happen with me
add below script too
<script src="js/bootstrap.min.js" type="text/javascript" rel="script"></script>
<script src="https://ajax.googleapis.com..."></script>
<script src="js/jquery-1.11.3.min.js" type="text/javascript" rel="script"></script>
after apply this it works well !!!

deepika () - 7 years ago - Reply 0

dsds

Celal Akgün () - 7 years ago - Reply 0

Thank you for it is really helpful but once i clicked to other filter other than "all", it will not work.... CSS works fine but i think there is some problem in button click.
Please help me for solving this issue

kanu () - 7 years ago - Reply 0

Great Help !! thanks for sharing this :-)

Luciana () - 7 years ago - Reply 0

Dear shah,
Thanks for the fantastic filter. it was such a magic wand.
one request.
Is it possible to get the links for the filters. So that we can put those links in other pages. when clicked this gallery page is loaded and filtered with the selected option.

i.e. In home page we put a link named "Irrigation Pipes" directing to this Gallery page. When clicked this gallery page gets loaded by displaying filtered pictures of Irrigation pipes and not ALL pictures. Please help.

Thank you.

pdpicasso () - 7 years ago - Reply 0

this snipp is example....i had also created same for my client's site u can check this refrence : http://gamabetaalpha.com/cl...

Meet Shah () - 7 years ago - Reply 0

okay firstly thank you for lovely apprisation... see here as of my need i had given names of category names like irrigation pipe..hdpe pipes etc. but here if u click all button (ofcourse it is already active clicked which is bug you can say) then all images (12) presents.. if you click on hdpe pipe than image with hdpe is categorize from all and u can see... so this is jst what i can explain you..

Meet Shah () - 7 years ago - Reply 0

Thank you

pdpicasso () - 7 years ago - Reply 0

Great work Gallery with filtering Thanks

zaved khan () - 7 years ago - Reply 0

Hey, thanks for the code... Do you know how can I give the 'active color' to the clicked button? The category and filter are working but "All" remains as the active category in the buttons.

Thanks!

Mishës () - 7 years ago - Reply 0

The same problem happen with me
add below script too
<script src="js/bootstrap.min.js" type="text/javascript" rel="script"></script>
<script src="https://ajax.googleapis.com..."></script>
<script src="js/jquery-1.11.3.min.js" type="text/javascript" rel="script"></script>
after apply this it works well !!!

deepika () - 7 years ago - Reply 0

Add this to JS:

if ($(".filter-button").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");

mcgsoft () - 7 years ago - Reply 0

Hy. Thanks for this code.

Work Great

Admin () - 7 years ago - Reply 0

Thanks ..it's mah pleasure..

Meet Shah () - 7 years ago - Reply 0