How To Create a Portfolio Gallery with Filtering?

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

<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">
            <h2 class="gallery-title">Gallery</h2>
        </div>

        <div align="center">
            <button class="btn btn-default dribble-button" data-dribble="all">All</button>
            <button class="btn btn-default dribble-button" data-dribble="hdpe">HDPE Pipes</button>
            <button class="btn btn-default dribble-button" data-dribble="sprinkle">Sprinkle Pipes</button>
            <button class="btn btn-default dribble-button" data-dribble="spray">Spray Nozzle</button>
            <button class="btn btn-default dribble-button" data-dribble="irrigation">Irrigation Pipes</button>
        </div>
        <br/>



            <div class="tamilrokers_upcomming_movies col-lg-4 col-md-4 col-sm-4 col-xs-6 dribble hdpe">
                <img src="https://www.pakainfo.com/625x625/" class="img-responsive">
            </div>

            <div class="tamilrokers_upcomming_movies col-lg-4 col-md-4 col-sm-4 col-xs-6 dribble sprinkle">
                <img src="https://www.pakainfo.com/625x625/" class="img-responsive">
            </div>

            <div class="tamilrokers_upcomming_movies col-lg-4 col-md-4 col-sm-4 col-xs-6 dribble hdpe">
                <img src="https://www.pakainfo.com/625x625/" class="img-responsive">
            </div>

            <div class="tamilrokers_upcomming_movies col-lg-4 col-md-4 col-sm-4 col-xs-6 dribble irrigation">
                <img src="https://www.pakainfo.com/625x625/" class="img-responsive">
            </div>

            <div class="tamilrokers_upcomming_movies col-lg-4 col-md-4 col-sm-4 col-xs-6 dribble spray">
                <img src="https://www.pakainfo.com/625x625/" class="img-responsive">
            </div>

            <div class="tamilrokers_upcomming_movies col-lg-4 col-md-4 col-sm-4 col-xs-6 dribble irrigation">
                <img src="https://www.pakainfo.com/625x625/" class="img-responsive">
            </div>

            <div class="tamilrokers_upcomming_movies col-lg-4 col-md-4 col-sm-4 col-xs-6 dribble spray">
                <img src="https://www.pakainfo.com/625x625/" class="img-responsive">
            </div>

            <div class="tamilrokers_upcomming_movies col-lg-4 col-md-4 col-sm-4 col-xs-6 dribble irrigation">
                <img src="https://www.pakainfo.com/625x625/" class="img-responsive">
            </div>

            <div class="tamilrokers_upcomming_movies col-lg-4 col-md-4 col-sm-4 col-xs-6 dribble irrigation">
                <img src="https://www.pakainfo.com/625x625/" class="img-responsive">
            </div>

            <div class="tamilrokers_upcomming_movies col-lg-4 col-md-4 col-sm-4 col-xs-6 dribble hdpe">
                <img src="https://www.pakainfo.com/625x625/" class="img-responsive">
            </div>

            <div class="tamilrokers_upcomming_movies col-lg-4 col-md-4 col-sm-4 col-xs-6 dribble spray">
                <img src="https://www.pakainfo.com/625x625/" class="img-responsive">
            </div>

            <div class="tamilrokers_upcomming_movies col-lg-4 col-md-4 col-sm-4 col-xs-6 dribble sprinkle">
                <img src="https://www.pakainfo.com/625x625/" class="img-responsive">
            </div>
        </div>
    </div>
</section>

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.

Read Also:  Laravel 6 Pagination Link Customizations Example