DEV Community

Cover image for Responsive Image Lightbox Design Using HTML, CSS, and Vanilla Javascript
Ashutosh Tiwari
Ashutosh Tiwari

Posted on • Originally published at incoderweb.blogspot.com

Responsive Image Lightbox Design Using HTML, CSS, and Vanilla Javascript

#html #css #javascript #incoder

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:-

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>&nbsp;<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>
Enter fullscreen mode Exit fullscreen mode

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%);
}
Enter fullscreen mode Exit fullscreen mode

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')
        })
    })
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

lebbe profile image

GlobalErrorHandler: Catch the errors that falls through ErrorBoundary's fingers!

Lars-Erik Bruce -

notarena profile image

Create Toggle Button in HTML CSS & JavaScript

Notarena -

sunnyss profile image

Java Programming

sunny -

sonaykara profile image

Why Virtual DOM: Render and Performance

Sonay Kara -