Hello friend, today in this blog we will learn how to create a responsive image lightbox Design using HTML, CSS, and Vanilla Javascript. In our previous blog, we saw how to create a password strength checker using HTML, CSS, and Javascript. Now it's time to create an Image lightbox. If you are interested then you can check my other javascript projects after reading this blog. My javascript blogs.
You may have seen image lightboxes on many websites. Lightbox showcases images and video by covering 80% screen of the websites and dimming out the rest of the page. In the lightbox, there are slide controls, you can easily switch from one image to another one. There are many javascript libraries for lightbox but in this blog, I will show you how to create lightbox without using any javascript or jquery library.
you may like these:-
- Cookie Consent Box Design
- Responsive Accordion Design
- Animated Product Preview Card Design
- Custom Context or Right Click Menu Design
In this project [Responsive Image Lightbox] there are six images on the webpage. When you hover over the image it increases its size means a zoom-out effect and when you click on a particular image lightbox appears with a smooth transition. In the lightbox,m there is the total image number and current image number in the top left corner and a close button with a cross icon in the top right corner as you can see in the image above. There are precious and next buttons also to change the image. when you click on the close button the lightbox disappears.
This image gallery and lightbox are totally responsive on all devices. On the PC, there are 3 three images in a single row but on the mobile devices, there is only one image in the single row. If you’re feeling difficulty understanding what I’m saying then you can check the source code and preview as well.
Preview is available here.
HTML Code
<!-- --------------------- Created By InCoder --------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>
<body>
<div class="container">
<div class="gallery">
<div class="image">
<img src="https://drive.google.com/uc?id=1W_YHw1ky5GScu_oFR3Fa2xsA77Mi037B&export=view" alt="watch">
</div>
<div class="image">
<img src="https://drive.google.com/uc?id=1EkzGCReXAqdi0dcat2WWdioU0MM09STD&export=view" alt="laptop">
</div>
<div class="image">
<img src="https://drive.google.com/uc?id=1hTezbGNnjK54_jprSLrbNxF6gQIHFqqc&export=view" alt="laptop">
</div>
<div class="image">
<img src="https://drive.google.com/uc?id=1mSCh-fkpC31MTIyu63ylxZJ-12Wib2e5&export=view" alt="laptop">
</div>
<div class="image">
<img src="https://drive.google.com/uc?id=12Fs0GeOk0x8yr38Nepackc4dju3fKuLa&export=view" alt="laptop">
</div>
<div class="image">
<img src="https://drive.google.com/uc?id=1sBpjjw_FjIPu0uwAX0IEI9RHUxF3NPsf&export=view" alt="laptop">
</div>
</div>
</div>
<div class="lightBoxContainer">
<div class="wrapper">
<div class="header">
<div class="count">
<p><span class="current"></span> <span class="total"></span></p>
</div>
<button class="closeBtn">
<i class="fa-solid fa-xmark"></i>
</button>
</div>
<div class="body">
<i class="fa-solid fa-angle-left pre"></i>
<img src="">
<i class="fa-solid fa-angle-right next"></i>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS Code
/* --------------------- Created By InCoder --------------------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
background-color: #ff5757;
font-family: 'Poppins', sans-serif;
}
.container{
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.gallery{
display: flex;
flex-wrap: wrap;
max-height: 100%;
margin-top: 2rem;
align-items: center;
justify-content: center;
}
.image {
margin: 1rem;
cursor: pointer;
max-width: 18rem;
overflow: hidden;
max-height: 11rem;
border-radius: .5rem;
}
.image img{
max-width: 18rem;
transition: transform .3s ease-in-out;
}
.image:hover img{
transform: scale(1.1);
}
.lightBoxContainer{
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
display: flex;
position: fixed;
align-items: center;
pointer-events: none;
justify-content: center;
backdrop-filter: blur(2px);
background: rgb(0 0 0 / 60%);
transition: opacity 0.3s ease-in-out;
}
.lightBoxContainer.show{
opacity: 1;
pointer-events: auto;
}
.lightBoxContainer .wrapper{
display: flex;
max-width: 40rem;
align-items: center;
flex-direction: column;
justify-content: center;
}
.lightBoxContainer .body{
display: flex;
margin-bottom: 1rem;
align-items: center;
flex-direction: column;
justify-content: center;
}
.lightBoxContainer .header{
width: 100%;
display: flex;
padding: 0 2rem;
margin-top: 1rem;
align-items: center;
margin-bottom: 1rem;
justify-content: space-between;
}
.lightBoxContainer .header .count{
color: #fff;
}
.lightBoxContainer .header .closeBtn{
border: 0;
color: #fff;
width: 2.6rem;
height: 2.6rem;
cursor: pointer;
font-size: 1.5rem;
border-radius: 50%;
background: transparent;
transition: background .3s ease-in-out;
}
.lightBoxContainer .header .closeBtn:hover{
background: rgb(255 255 255 / 20%);
}
.lightBoxContainer .body img{
max-width: 80%;
margin: 0 1rem;
}
.lightBoxContainer .body{
display: flex;
flex-direction: row;
}
.lightBoxContainer .body :is(.fa-angle-left, .fa-angle-right){
border: 0;
color: #fff;
width: 2.6rem;
display: grid;
height: 2.6rem;
cursor: pointer;
font-size: 1.8rem;
border-radius: 50%;
place-items: center;
background: transparent;
transition: background .3s ease-in-out;
}
.lightBoxContainer .body :is(.fa-angle-left, .fa-angle-right):hover{
background: rgb(255 255 255 / 20%);
}
Javascript Code
// --------------------- Created By InCoder ---------------------
let images = document.querySelectorAll('.image')
lightBoxContainer = document.querySelector('.lightBoxContainer')
containerBody = document.querySelector('.lightBoxContainer .body')
nextBtn = document.querySelector('.next')
preBtn = document.querySelector('.pre')
image = containerBody.querySelector('img')
wrapper = document.querySelector('.wrapper')
closeBtn = document.querySelector('.closeBtn')
totalImg = document.querySelector('.total')
currentImg = document.querySelector('.current')
for (let i = 0; i < images.length; i++) {
let newindex = i
images[i].addEventListener('click', () => {
function openPreview() {
let imageURL = images[newindex].querySelector('img').src
image.src = imageURL
currentImg.innerText = `Image ${newindex + 1} of ${images.length}`
if(newindex == 0){
preBtn.style.display = 'none';
}else{
preBtn.style.display = 'grid';
}
if(newindex >= images.length - 1){
nextBtn.style.display = 'none';
}else{
nextBtn.style.display = 'grid';
}
lightBoxContainer.classList.add('show')
}
preBtn.addEventListener('click', () => {
newindex--
if(newindex == 0){
openPreview()
preBtn.style.display = 'none';
}else{
openPreview()
}
})
nextBtn.addEventListener('click', () => {
newindex++
if(newindex >= images.length - 1){
openPreview()
nextBtn.style.display = 'none';
}else{
openPreview()
}
})
openPreview()
closeBtn.addEventListener('click', () => {
preBtn.style.display = 'grid';
nextBtn.style.display = 'grid';
lightBoxContainer.classList.remove('show')
})
lightBoxContainer.addEventListener('click', (e) => {
if(e.target !== e.currentTarget) return
preBtn.style.display = 'grid';
nextBtn.style.display = 'grid';
lightBoxContainer.classList.remove('show')
})
})
}
Top comments (0)