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>
Leave a Reply