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

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS