LeffeBakedBird

// the lightbox functionality
$('.gallery-img-holder').on('click', function() {
    var ClickedImgSrc = $(this).children('img').attr('src');
    var theLightboxImage = $('.lightbox>.img-container>img'); 
    theLightboxImage.attr('src', ClickedImgSrc);
    $('.lightbox .close-btn').css('left', theLightboxImage.width()/2);
    $('.lightbox').addClass('open');
});

// close the lightbox

LeffeBakedBird

.lightbox {
    display: table;
    position: fixed;
    top: 0;
    background: rgba(0, 0, 0, 0.49);
    height: 100%;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: .1s all ease-in;

LeffeBakedBird

<div class="lightbox">
    <div class="img-container">
        <span class="glyphicon glyphicon-remove close-btn"></span>
        <img src="" class="img-responsive thumbnail" />
    </div>
</div>

LeffeBakedBird

jQuery('document').ready( function($) {
    $('.gallery-filters li').on('click', function() {
        $('.gallery-filters li').removeClass('active');
        $(this).addClass('active');
        filter = $(this).attr('gallery-filter');

        $('.gallery-img-holder').each( function() {
            if (filter == 'all') {
                $(this).fadeIn(); 
            } else {

LeffeBakedBird

<div class="container">
    <div class="row mtb-20">
        <div class="col-xs-12">
            <ul class="nav nav-pills gallery-filters">
                <li role="presentation" class="active" gallery-filter="all"><a href="#">All</a></li>
                <li role="presentation" gallery-filter="houses"><a href="#">Houses</a></li>
                <li role="presentation" gallery-filter="people"><a href="#">People</a></li>
                <li role="presentation" gallery-filter="animals"><a href="#">Animals</a></li>
                <li role="presentation" gallery-filter="places"><a href="#">Places</a></li>
            </ul>

LeffeBakedBird

<div class="row mtb-20">
    <div class="col-xs-12">
        <ul class="nav nav-pills gallery-filters">
            <li role="presentation"><a href="#">All</a></li>
            <li role="presentation"><a href="#">Houses</a></li>
            <li role="presentation"><a href="#">People</a></li>
            <li role="presentation"><a href="#">Animals</a></li>
            <li role="presentation"><a href="#">Places</a></li>
        </ul>
    </div>

LeffeBakedBird

<div class="row gallery-images">
    <div class="col-sm-4 gallery-img-holder">
        <img src="img/animal1.jpeg" class="img-rounded thumbnail" />
    </div>
    <div class="col-sm-4 gallery-img-holder">
        <img src="img/animal2.jpg" class="img-rounded thumbnail" />
    </div>
    <div class="col-sm-4 gallery-img-holder">
        <img src="img/animal3.jpg" class="img-rounded thumbnail" />
    </div>