Today, We want to share with you bootstrap portfolio gallery with filtering category.In this post we will show you jquery portfolio gallery with categories, hear for responsive grid gallery with lightbox popup and tag filter we will give you demo and example for implement.In this post, we will learn about Search Filter using Nodejs and MySQL with an example.
bootstrap portfolio gallery
HTML CODE
Gallery
JS Code
$(document).ready(function(){
$(".dribble-button").click(function(){
var value = $(this).attr('data-dribble');
if(value == "all")
{
//$('.dribble').removeClass('hidden');
$('.dribble').show('1000');
}
else
{
// $('.dribble[dribble-item="'+value+'"]').removeClass('hidden');
// $(".dribble").not('.dribble[dribble-item="'+value+'"]').addClass('hidden');
$(".dribble").not('.'+value).hide('3000');
$('.dribble').dribble('.'+value).show('3000');
}
});
if ($(".dribble-button").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");
});
CSS CODE/h3>
.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;
}
.dribble-button
{
font-size: 18px;
border: 1px solid #42B32F;
border-radius: 5px;
text-align: center;
color: #42B32F;
margin-bottom: 30px;
}
.dribble-button:hover
{
font-size: 18px;
border: 1px solid #42B32F;
border-radius: 5px;
text-align: center;
color: #ffffff;
background-color: #42B32F;
}
.btn-default:active .dribble-button:active
{
background-color: #42B32F;
color: white;
}
.port-image
{
width: 100%;
}
.tamilrokers_upcomming_movies
{
margin-bottom: 30px;
}
I hope you get an idea about responsive filter gallery jquery.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.