Design a Rotating Image Gallery App in HTML CSS & JavaScript

Design an Image Search App in HTML CSS & JavaScript

We’ll gather some images and build a gallery that can be rotated with straightforward buttons. To rotate the images to the right, we’ll use the right button, and for left rotation, we’ll use the left button. The process will be simple, allowing us to easily rotate the images using these buttons.

Preview Image:

Approach :

To start, we make a folder. In this folder, we put three files for HTML, CSS, and JavaScript.
In the HTML file, we design the layout of the image gallery app. We add images using a link, and we can also use the link for the images. In this case, we use the GFG image link.
In the CSS file, we write some styles to make the visualization more appealing. We also set parameters for rotation.
In the JavaScript file, we write the main logic. This logic enables easy rotation of images from left to right by clicking the corresponding left and right buttons.

Javascript

const imageContainer = 
    document.querySelector('.image-container');
const prevBtn = 
    document.getElementById('prev');
const nextBtn = 
    document.getElementById('next');
const overlay = 
    document.getElementById('overlay');
const popupImg = 
    document.getElementById('popup-img');
const images = 
    document.querySelectorAll('.image-container span img');
 
let x = 0;
prevBtn.addEventListener('click', () => {
    x = x + 45;
    rotate();
});
nextBtn.addEventListener('click', () => {
    x = x - 45;
    rotate();
});
 
images.forEach(image => {
    image.addEventListener('click', () => {
        const src = image.getAttribute('src');
        popupImg.setAttribute('src', src);
        overlay.classList.add('active');
    });
});
 
overlay.addEventListener('click', () => {
    overlay.classList.remove('active');
});
 
function rotate() {
    imageContainer.style.transform = 
        `perspective(1000px) rotateY(${x}deg)`;
}

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Rotating Gallery</title>
    <link rel="stylesheet" href="/style.css">
    <style>
 
    </style>
</head>
 
<body>
    <div class="image-container">
        <span style="--i: 1">
            <img src=
"https://media.w3wiki.net/wp-content/uploads/20240213150115/ppp.png" alt="">
        </span>
        <span style="--i: 2">
            <img src=
"https://media.w3wiki.net/wp-content/uploads/20240216133007/20.jpg" alt="">
        </span>
        <span style="--i: 3">
            <img src=
"https://media.w3wiki.net/wp-content/uploads/20240216140352/Business-Intelligence-Tools.webp"
                alt="">
        </span>
        <span style="--i: 4">
            <img src=
"https://media.w3wiki.net/wp-content/uploads/20240216134711/stock-vector-food-chain-colored-vector-illustration-2184501363.jpg"
                alt="">
        </span>
        <span style="--i: 5">
            <img src=
"https://media.w3wiki.net/wp-content/uploads/20240216135604/file.webp" alt="">
        </span>
        <span style="--i: 6">
            <img src=
"https://media.w3wiki.net/wp-content/uploads/20240216135739/Data-Management-tools.webp"
                alt="">
        </span>
        <span style="--i: 7">
            <img src=
"https://media.w3wiki.net/wp-content/uploads/20240216141611/file.jpg" alt="">
        </span>
        <span style="--i: 8">
            <img src=
"https://media.w3wiki.net/wp-content/uploads/20240216141633/2.webp" alt="">
        </span>
    </div>
 
    <div class="overlay" id="overlay">
        <img class="popup-img" id="popup-img" src=""
             alt="Popup Image">
    </div>
 
    <div class="btn-container">
        <button class="btn" id="prev">
            Left
        </button>
        <button class="btn" id="next">
            Right
        </button>
    </div>
 
    <script src="/script.js">
 
    </script>
</body>
 
</html>

CSS

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100vh;
    overflow: hidden;
}
 
.image-container {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    transform: perspective(1000px) rotate(0deg);
    transition: transform 0.7s;
}
 
.image-container span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    cursor: pointer;
    transform: rotateY(calc(var(--i) * 45deg)) translateZ(400px);
    transition: transform 0.3s ease;
}
 
.image-container span img {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 10px;
    width: 80%;
    transition: transform 0.3s ease;
}
 
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;
    display: none;
    justify-content: center;
    align-items: center;
}
 
.overlay.active {
    display: flex;
}
 
.popup-img {
    width: 300px;
    height: 300px;
    margin-top: -5%;
    margin-left: -4%;
    background-color: rgb(82, 80, 80);
    border-radius: 15px;
 
}
 
.btn-container {
    position: relative;
    width: 80%;
}
 
.btn {
    position: absolute;
    bottom: -80px;
    background-color: rgb(98, 226, 98);
    color: black;
    font-weight: bold;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}
 
#prev {
    left: 20%;
}
 
#next {
    right: 20%;
}
 
#btn:hover {
    filter: brightness(1.5);
}

Output:

Tags:

#Dev Scripter 2024 #JavaScript-Projects #Dev Scripter #JavaScript #Project #Web Technologies