This snippet will create a very lightweight simple light box effect for you to use on images.

Add this code inside your document ready function after loading jQuery.

$('.lb').click(function(e){
    e.preventDefault();
    var image = $(this).attr("href");
    if ($('#lb').length > 0) {
        $('#content').html('<img src="' + image + '" />');
        $('#lb').fadeIn();
    } else {
        var lightbox =  '<div id="lb">' + '<div id="content">' + '<img src="' + image + '" />' + '</div>' + '</div>';
        $('body').append(lightbox);
        $('#lb').fadeIn();
    }
    $('#lb').live('click', function() {
        $('#lb').fadeOut();
    });
});

If your’re using a newer version of jquery replace “.live” with “.on”

You’ll also need this CSS

#lb {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    text-align: center;
    z-index: 1000;
    box-sizing: border-box;
    margin: 0 0 0 0;
    padding: 22px 22px 22px 22px;
    display: none;
}
#lb #content {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
#lb #content img {
    max-width: calc(100vw - 44px);
    max-height: calc(100vh - 44px);
}

Usage example:

<a class="lb" href="LINK_TO_FULL_SIZE_IMAGE">
    <img src="LINK_TO_THUMBNAIL_SIZE_IMAGE" />
</a>