content logo

Bootstrap Thumbnails:

Lightbox Gallery

Images are so important on all websites and professionals mostly use them to attract many people. If you use different pictures on your page, you can change the appearance of your website quickly. The Lightbox Gallery is the best idea on all websites. In this Bootstrap Thumbnails Code, you can beautifully add various images to your website. Most websites use this kind of HTML Thumbnails Code to attract new visitors and older audiences. You can apply the following code to your website to differentiate it from others.

This preview of this code shows two pictures vertically. As soon as you click on an image, you can see a hover effect and an animating effect. In this effect of JavaScript Thumbnails Code, the selected image will be small and then large smoothly. In this process, the picture has a gray background and there is a multiplication sign at the top-right corner of the picture. This sign is white, and the photo becomes full screen when you click on it. You can see that image on the whole page. We have prepared the mentioned code for you to add pictures to your website and increase its beauty. Download and use the Thumbnails with Full Screen for your website in a joyful way.

#

Bootstrap Thumbnails Code

#

HTML Thumbnails Code

#

Thumbnails with Full Screen

#

Javascript Thumbnails Code


<!-- This script got from frontendfreecode.com -->
<section class="p-0 p-md-5 container">
    <div class="row d-flex">
        <!-- The Modal -->
        <div class="col-12 col-lg-6 my-3">
            <div class="myBtn_multi lightboxpreview hoverexpand" style="background-image:url(https://i.picsum.photos/id/563/1255/800.jpg?hmac=O-jwHMN3mXNGA5bU9ONOU_WmDLqT92gH7_X6FZNuvlQ);">
            </div>
            <div class="modal modal_multi has-scroll-reveal fadeIn">
                <!-- Modal content -->
                <div class=" lightbox-content has-scroll-reveal grow modal_inner_image" style="background-image: url(https://i.picsum.photos/id/563/1255/800.jpg?hmac=O-jwHMN3mXNGA5bU9ONOU_WmDLqT92gH7_X6FZNuvlQ); background-size:cover; background-position:center;">
                    <span class="lightbox-close close_multi bluetext">×</span>
                </div>
            </div>
        </div>
        <!--   Modal End     -->
        <!-- The Modal -->
        <div class="col-12 col-lg-6 my-3">
            <div class="myBtn_multi lightboxpreview hoverexpand" style="background-image:url(https://i.picsum.photos/id/566/1255/800.jpg?hmac=Hes6clYMKrCYw82lTncD0pOUdhzE0nCn5XNs9613_OQ);">
            </div>
            <div class="modal modal_multi has-scroll-reveal fadeIn">
                <!-- Modal content -->
                <div class=" lightbox-content has-scroll-reveal grow modal_inner_image" style="background-image: url(https://i.picsum.photos/id/566/1255/800.jpg?hmac=Hes6clYMKrCYw82lTncD0pOUdhzE0nCn5XNs9613_OQ); background-size:cover; background-position:center;">
                    <span class="lightbox-close close_multi bluetext">×</span>
                </div>
            </div>
        </div>
        <!--   Modal End     -->
        <div class="col-12 d-flex justify-content-between">
        </div>
</section><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
body {
	min-height: 500px;
}
.lightboxpreview {
	transition: all .3s linear;
	height: 400px;
	cursor: pointer;
	background-size: cover;
}
.modal {
	position: fixed;
	top: 0;
	left: 0;
	outline: 0;
	z-index: 9999;
	overflow: hidden;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.4);
}
.lightbox_nav {
	position: absolute;
	bottom: -50px;
	z-index: 999999999999999999;
}
.lightbox-content {
	max-height: 75vh;
	height: 75vh;
	width: 88%;
	max-width: 1000px;
}
.lightbox-close {
	cursor: pointer;
	margin-left: auto;
	position: absolute;
	right: -30px;
	top: -30px;
	color: white;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
}
.modal_inner_image {
	min-height: 400px;
	z-index: 1000;
}
.modal-content {
	width: 100%;
}
/*Animations*/

/* Fade in from direction */

.has-scroll-reveal {
	animation-play-state: paused;
}
.animated {
	-webkit-animation-duration: 1.5s;
	animation-duration: 1.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	animation-play-state: running;
}
.fadeIn {
	opacity: 0;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}
.fadeInUp {
	opacity: 0;
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
}
.fadeInLeft {
	opacity: 0;
	-webkit-animation-name: fadeInLeft;
	animation-name: fadeInLeft;
}
.fadeInRight {
	opacity: 0;
	-webkit-animation-name: fadeInRight;
	animation-name: fadeInRight;
}
.fadeInDown {
	opacity: 0;
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
}
.grow {
	transform: scale(0);
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-name: grow;
	animation-name: grow;
}
@keyframes grow {
	from {
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}
@keyframes fadeInUp {
	from {
		opacity: 0;
		-webkit-transform: translateY(2.5rem);
		transform: translateY(2.5rem);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeInDown {
	from {
		opacity: 0;
		-webkit-transform: translateY(-2.5rem);
		transform: translateY(- 2.5rem);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeInLeft {
	from {
		opacity: 0;
		-webkit-transform: translateX(-2.5rem);
		transform: translateX(-2.5rem);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeInRight {
	from {
		opacity: 0;
		-webkit-transform: translateX(2.5rem);
		transform: translateX(2.5rem);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.modalscale {
	transform: scale(0);
	opacity: 0;
}
// Get the modal
var modalparent = document.getElementsByClassName("modal_multi");
// Get the button that opens the modal
var modal_btn_multi = document.getElementsByClassName("myBtn_multi");
// Get the <span> element that closes the modal
var span_close_multi = document.getElementsByClassName("close_multi");
// When the user clicks the button, open the modal
function setDataIndex() {
    for (i = 0; i < modal_btn_multi.length; i++) {
        modal_btn_multi[i].setAttribute('data-index', i);
        modalparent[i].setAttribute('data-index', i);
        span_close_multi[i].setAttribute('data-index', i);
    }
}
for (i = 0; i < modal_btn_multi.length; i++) {
    modal_btn_multi[i].onclick = function () {
        var ElementIndex = this.getAttribute('data-index');
        $(this).addClass('modalscale');
        modalparent[ElementIndex].style.display = "flex";
    }

    // When the user clicks on <span> (x), close the modal
    span_close_multi[i].onclick = function () {
        var ElementIndex = this.getAttribute('data-index');
        $(modal_btn_multi).removeClass('modalscale');
        modalparent[event.target.getAttribute('data-index')].style.display = "none";
    };

}
window.onload = function () {
    setDataIndex();
};
window.onclick = function (event) {
    if (event.target === modalparent[event.target.getAttribute('data-index')]) {
        modalparent[event.target.getAttribute('data-index')].style.display = "none";
        $(modal_btn_multi).removeClass('modalscale');
    }
};
// Animations
// SCROLL UP ANIMATION__________________________________________________________________
jQuery(document).ready(function ($) {
    let revealClass = '.animated';
    let targetClass = '.has-scroll-reveal:not(' + revealClass + ')';
    let offset = 100; // Offset from bottom of viewport in pixels.
    let winHeight = $(window).height();
    // Recalc height of window in case of resize
    $(window).bind('resizeEnd', function () {
        winHeight = $(window).height();
    });
    // Fire when page loads
    triggerAnimation(revealClass, targetClass, offset, winHeight);
    // Also fire on scroll
    $(window).on('scroll', function () {
        triggerAnimation(revealClass, targetClass, offset, winHeight);
    }); // window.on('scroll')
}); // document.ready
function triggerAnimation(revealClass, targetClass, offset, winHeight) {
    // Get current scrollPos
    let trigger = $(window).scrollTop() + winHeight - offset;
    // Loop through elements we're affecting
    $(targetClass).each(function () {
        let elementOffset = $(this).offset().top;
        if (elementOffset < trigger) {
            $(this).addClass(revealClass.replace('.', ''));
        }
    });
}
// SCROLL UP ANIMATION END______________________________________________________
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<style>
body {
	min-height: 500px;
}
.lightboxpreview {
	transition: all .3s linear;
	height: 400px;
	cursor: pointer;
	background-size: cover;
}
.modal {
	position: fixed;
	top: 0;
	left: 0;
	outline: 0;
	z-index: 9999;
	overflow: hidden;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.4);
}
.lightbox_nav {
	position: absolute;
	bottom: -50px;
	z-index: 999999999999999999;
}
.lightbox-content {
	max-height: 75vh;
	height: 75vh;
	width: 88%;
	max-width: 1000px;
}
.lightbox-close {
	cursor: pointer;
	margin-left: auto;
	position: absolute;
	right: -30px;
	top: -30px;
	color: white;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
}
.modal_inner_image {
	min-height: 400px;
	z-index: 1000;
}
.modal-content {
	width: 100%;
}
/*Animations*/

/* Fade in from direction */

.has-scroll-reveal {
	animation-play-state: paused;
}
.animated {
	-webkit-animation-duration: 1.5s;
	animation-duration: 1.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	animation-play-state: running;
}
.fadeIn {
	opacity: 0;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}
.fadeInUp {
	opacity: 0;
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
}
.fadeInLeft {
	opacity: 0;
	-webkit-animation-name: fadeInLeft;
	animation-name: fadeInLeft;
}
.fadeInRight {
	opacity: 0;
	-webkit-animation-name: fadeInRight;
	animation-name: fadeInRight;
}
.fadeInDown {
	opacity: 0;
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
}
.grow {
	transform: scale(0);
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-name: grow;
	animation-name: grow;
}
@keyframes grow {
	from {
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}
@keyframes fadeInUp {
	from {
		opacity: 0;
		-webkit-transform: translateY(2.5rem);
		transform: translateY(2.5rem);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeInDown {
	from {
		opacity: 0;
		-webkit-transform: translateY(-2.5rem);
		transform: translateY(- 2.5rem);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeInLeft {
	from {
		opacity: 0;
		-webkit-transform: translateX(-2.5rem);
		transform: translateX(-2.5rem);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeInRight {
	from {
		opacity: 0;
		-webkit-transform: translateX(2.5rem);
		transform: translateX(2.5rem);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.modalscale {
	transform: scale(0);
	opacity: 0;
}
</style>

</head>
<body>
<section class="p-0 p-md-5 container">
    <div class="row d-flex">
        <!-- The Modal -->
        <div class="col-12 col-lg-6 my-3">
            <div class="myBtn_multi lightboxpreview hoverexpand" style="background-image:url(https://i.picsum.photos/id/563/1255/800.jpg?hmac=O-jwHMN3mXNGA5bU9ONOU_WmDLqT92gH7_X6FZNuvlQ);">
            </div>
            <div class="modal modal_multi has-scroll-reveal fadeIn">
                <!-- Modal content -->
                <div class=" lightbox-content has-scroll-reveal grow modal_inner_image" style="background-image: url(https://i.picsum.photos/id/563/1255/800.jpg?hmac=O-jwHMN3mXNGA5bU9ONOU_WmDLqT92gH7_X6FZNuvlQ); background-size:cover; background-position:center;">
                    <span class="lightbox-close close_multi bluetext">×</span>
                </div>
            </div>
        </div>
        <!--   Modal End     -->
        <!-- The Modal -->
        <div class="col-12 col-lg-6 my-3">
            <div class="myBtn_multi lightboxpreview hoverexpand" style="background-image:url(https://i.picsum.photos/id/566/1255/800.jpg?hmac=Hes6clYMKrCYw82lTncD0pOUdhzE0nCn5XNs9613_OQ);">
            </div>
            <div class="modal modal_multi has-scroll-reveal fadeIn">
                <!-- Modal content -->
                <div class=" lightbox-content has-scroll-reveal grow modal_inner_image" style="background-image: url(https://i.picsum.photos/id/566/1255/800.jpg?hmac=Hes6clYMKrCYw82lTncD0pOUdhzE0nCn5XNs9613_OQ); background-size:cover; background-position:center;">
                    <span class="lightbox-close close_multi bluetext">×</span>
                </div>
            </div>
        </div>
        <!--   Modal End     -->
        <div class="col-12 d-flex justify-content-between">
        </div>
</section><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
// Get the modal
var modalparent = document.getElementsByClassName("modal_multi");
// Get the button that opens the modal
var modal_btn_multi = document.getElementsByClassName("myBtn_multi");
// Get the <span> element that closes the modal
var span_close_multi = document.getElementsByClassName("close_multi");
// When the user clicks the button, open the modal
function setDataIndex() {
    for (i = 0; i < modal_btn_multi.length; i++) {
        modal_btn_multi[i].setAttribute('data-index', i);
        modalparent[i].setAttribute('data-index', i);
        span_close_multi[i].setAttribute('data-index', i);
    }
}
for (i = 0; i < modal_btn_multi.length; i++) {
    modal_btn_multi[i].onclick = function () {
        var ElementIndex = this.getAttribute('data-index');
        $(this).addClass('modalscale');
        modalparent[ElementIndex].style.display = "flex";
    }

    // When the user clicks on <span> (x), close the modal
    span_close_multi[i].onclick = function () {
        var ElementIndex = this.getAttribute('data-index');
        $(modal_btn_multi).removeClass('modalscale');
        modalparent[event.target.getAttribute('data-index')].style.display = "none";
    };

}
window.onload = function () {
    setDataIndex();
};
window.onclick = function (event) {
    if (event.target === modalparent[event.target.getAttribute('data-index')]) {
        modalparent[event.target.getAttribute('data-index')].style.display = "none";
        $(modal_btn_multi).removeClass('modalscale');
    }
};
// Animations
// SCROLL UP ANIMATION__________________________________________________________________
jQuery(document).ready(function ($) {
    let revealClass = '.animated';
    let targetClass = '.has-scroll-reveal:not(' + revealClass + ')';
    let offset = 100; // Offset from bottom of viewport in pixels.
    let winHeight = $(window).height();
    // Recalc height of window in case of resize
    $(window).bind('resizeEnd', function () {
        winHeight = $(window).height();
    });
    // Fire when page loads
    triggerAnimation(revealClass, targetClass, offset, winHeight);
    // Also fire on scroll
    $(window).on('scroll', function () {
        triggerAnimation(revealClass, targetClass, offset, winHeight);
    }); // window.on('scroll')
}); // document.ready
function triggerAnimation(revealClass, targetClass, offset, winHeight) {
    // Get current scrollPos
    let trigger = $(window).scrollTop() + winHeight - offset;
    // Loop through elements we're affecting
    $(targetClass).each(function () {
        let elementOffset = $(this).offset().top;
        if (elementOffset < trigger) {
            $(this).addClass(revealClass.replace('.', ''));
        }
    });
}
// SCROLL UP ANIMATION END______________________________________________________
</script>

</body>
</html>
Preview