Filterable Image Gallery with preview using HTML, CSS, and Javascript

#html #javascript #css #incoder

Hello friends, today in this blog you will learn how to create a filterable gallery with a preview using HTML, CSS, and Javascript. In our previous blog, we saw how to detect user location using Javascript. Now it's time to create a filterable image gallery. I've also shared many projects related to Javascript. So don't forget to check here.

In this design [Filterable Image Gallery], there are some image category buttons. when you hover on the button, its background color changes into red color and the text color changes into white. When you hover over the images it increases their size and when you click on the image its preview opens in a modal.

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>Filterable Image Gallery - InCoder</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="galleryContainer">
        <div class="items">
            <ul>
                <li><button class="item showAll">All</button></li>
                <li><button class="item" data-filterItem="bag">Bags</button></li>
                <li><button class="item" data-filterItem="glass">Glass</button></li>
                <li><button class="item" data-filterItem="shoe">Shoe</button></li>
                <li><button class="item" data-filterItem="laptop">Laptop</button></li>
                <li><button class="item" data-filterItem="mobile">Mobile</button></li>
                <li><button class="item" data-filterItem="watch">Watch</button></li>
            </ul>
        </div>
        <div class="imageBox">

            <div class="image" data-filterName="watch"><img src="https://drive.google.com/uc?id=1W_YHw1ky5GScu_oFR3Fa2xsA77Mi037B&export=view" alt="Watch"></div>
            <div class="image" data-filterName="bag"><img src="https://drive.google.com/uc?id=1lykvDrCbjrT2u9CWynE40zK39VufHy3z&export=view" alt="Bag"></div>
            <div class="image" data-filterName="mobile"><img src="https://drive.google.com/uc?id=163jK_I6y8nO5D3i0w03uymifabs_ZL_l&export=view" alt="mobile"></div>
            <div class="image" data-filterName="glass"><img src="https://drive.google.com/uc?id=13iUskQ9E2WBxhNlOZ1WG8w-ZyK3IKD1h&export=view" alt="glass"></div>
            <div class="image" data-filterName="shoe"><img src="https://drive.google.com/uc?id=1hTezbGNnjK54_jprSLrbNxF6gQIHFqqc&export=view" alt="shoe"></div>
            <div class="image" data-filterName="laptop"><img src="https://drive.google.com/uc?id=1EkzGCReXAqdi0dcat2WWdioU0MM09STD&export=view" alt="laptop"></div>

            <div class="image" data-filterName="watch"><img src="https://drive.google.com/uc?id=1Z0h0BLzmwx50vl7HQ_kW90t5httnXiH1&export=view" alt="Watch"></div>
            <div class="image" data-filterName="bag"><img src="https://drive.google.com/uc?id=1ULAinHaHzPk1WCpWe2TSWisw8VBV4Uz0&export=view" alt="Bag"></div>
            <div class="image" data-filterName="mobile"><img src="https://drive.google.com/uc?id=19iq87EI68cDYesJJLTN4gnNaD5vo82d0&export=view" alt="mobile"></div>
            <div class="image" data-filterName="glass"><img src="https://drive.google.com/uc?id=1dD4uaF-8ghq1s0JHW9uQCtQHLw9MhzMO&export=view" alt="glass"></div>
            <div class="image" data-filterName="shoe"><img src="https://drive.google.com/uc?id=1sBpjjw_FjIPu0uwAX0IEI9RHUxF3NPsf&export=view" alt="shoe"></div>
            <div class="image" data-filterName="laptop"><img src="https://drive.google.com/uc?id=1itaU8oXioTRRp1IwyqQ-dNo9AW0VEQME&export=view" alt="laptop"></div>

            <div class="image" data-filterName="watch"><img src="https://drive.google.com/uc?id=1G8L4nao4LpW1n-rf8BtCEQ2FAUMugilh&export=view" alt="Watch"></div>
            <div class="image" data-filterName="bag"><img src="https://drive.google.com/uc?id=1MkgIn8fUeq6hkcnUA_q5BB0JQmW-oyDK&export=view" alt="Bag"></div>
            <div class="image" data-filterName="mobile"><img src="https://drive.google.com/uc?id=12Fs0GeOk0x8yr38Nepackc4dju3fKuLa&export=view" alt="mobile"></div>
            <div class="image" data-filterName="glass"><img src="https://drive.google.com/uc?id=1mSCh-fkpC31MTIyu63ylxZJ-12Wib2e5&export=view" alt="glass"></div>
            <div class="image" data-filterName="shoe"><img src="https://drive.google.com/uc?id=18x1w02do6qh-Nw-zLQDDNcrcDYcugL3G&export=view" alt="shoe"></div>
            <div class="image" data-filterName="laptop"><img src="https://drive.google.com/uc?id=1O_mMsBM_VANjTDDbcMN1nmvljPl0kOxP&export=view" alt="laptop"></div>
        </div>
    </div>

    <div class="previewContainer">
        <div class="previewModal">
            <div class="header">
                <h2>Image Preview</h2>
                <div class="closeIcon">
                    <i class="fa-solid fa-xmark"></i>
                </div>
            </div>
            <div class="body">
                <img src="" class="previewImg" alt="Watch">
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>

</html>

CSS Code

/* ---------------------- Created By InCoder ---------------------- */

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
* {
    margin: 0;
    padding: 0;
}

body {
    background-color: rgb(24 24 24 / 93%);
}

.galleryContainer {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.items ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.items ul li {
    list-style: none;
    margin: 1.5rem 1rem;
}

.items ul li button.item {
    color: #F53B69;
    cursor: pointer;
    font-size: 1rem;
    border-radius: 2rem;
    padding: .6rem 1.8rem;
    border: 2px solid #F53B69;
    background-color: transparent;
    transition: background-color .3s ease, color .3s ease;
}

.items ul li button.item:hover {
    color: #fff;
    background-color: #F53B69;
}

.item.active {
    color: #fff!important;
    background-color: #F53B69!important;
}

.imageBox {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.imageBox .image img {
    max-width: 16rem;
    max-height: 16rem;
    transition: transform 0.3s ease-in-out;
}

.imageBox .image {
    cursor: pointer;
    overflow: hidden;
    margin: .5rem 2rem;
    position: relative;
    transition: all .5s ease-in-out;
}

.imageBox .image.show {
    animation: show .5s ease;
}

.imageBox .image.hide {
    opacity: 0;
    display: none;
    transform: scale(.5)
}

@keyframes show {
    0% {
        transform: scale(.5)
    }
    100% {
        transform: scale(1)
    }
}

.imageBox .image:hover img {
    transform: scale(1.1);
}

.previewContainer {
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    position: fixed;
    align-items: center;
    pointer-events: none;
    justify-content: center;
    backdrop-filter: blur(2px);
    background: rgb(255 255 255 / 8%);
    transition: opacity 0.3s ease-in-out;
}

.previewContainer.active {
    opacity: 1;
    pointer-events: auto;
}

.previewContainer .previewModal {
    margin: 1rem;
    padding: 1rem 1rem;
    background: #fff;
    border-radius: .4rem;
    transform: translateY(-1rem);
    transition: transform 0.3s ease-in-out;
}

.previewContainer.active .previewModal {
    transform: translateY(0rem);
}

.previewContainer .previewModal .header {
    display: flex;
    margin-bottom: .8rem;
    justify-content: space-between;
}

.previewContainer .previewModal .header h2 {
    font-size: clamp( 1.8rem, 5vw, 2.2rem);
    font-family: 'Ubuntu', sans-serif;
}

.previewContainer .previewModal .header .closeIcon {
    display: grid;
    width: 2.8rem;
    height: 2.8rem;
    font-size: 2rem;
    cursor: pointer;
    border-radius: 50%;
    place-items: center;
    margin-right: .8rem;
    transition: background-color .2s ease-in-out;
}

.previewContainer .previewModal .header .closeIcon:hover {
    background-color: rgb(0 0 0 / 4%);
}

.previewContainer .previewModal .body {
    max-width: 50rem;
}

.previewContainer .previewModal .body img {
    width: 100%;
    max-height: 30rem;
}

Javascript Code

// ---------------------- Created By InCoder ----------------------

let items = document.querySelectorAll('.item');
let showAll = document.querySelector('.showAll');
let closeIcon = document.querySelector('.closeIcon');
let previewImg = document.querySelector('.previewImg');
let images = document.querySelectorAll('.imageBox .image');
let previewContainer = document.querySelector('.previewContainer');

function arrayMatch(clickedItem, allImages) {
    var matchedArray = [];
    for (var i = 0; i < clickedItem.length; ++i) {
        for (var j = 0; j < allImages.length; ++j) {
            if (clickedItem[i] == allImages[j]) {
                matchedArray.push(clickedItem[i]);
            }
        }
    }

    return matchedArray;
}

items.forEach((item) => {
    let filterItem = item.getAttribute('data-filterItem');
    item.addEventListener('click', (e) => {
        for (let i = 0; i < images.length; i++) {
            image = images[i].dataset.filtername;
        }

        for (let i = 0; i < items.length; i++) {
            if (items[i].classList.contains('active')) {
                items[i].classList.remove('active');
            }
        }
        if (!e.path[0].classList.contains('active')) {
            e.path[0].classList.add('active');
        }

        let clickedItem = [];
        for (let a = 0; a < 1; a++) {
            clickedItem.push(e.path[0].dataset.filteritem);
        }

        let allImages = [];
        for (let i = 0; i < images.length; i++) {
            allImages.push(images[i].dataset.filtername);
        }

        let matchingArray = arrayMatch(clickedItem, allImages)[0];

        for (let j = 0; j < images.length; j++) {
            let imagesName = images[j];
            if (imagesName.dataset.filtername == matchingArray) {
                imagesName.classList.remove('hide');
                imagesName.classList.add('show');
            } else {
                imagesName.classList.remove('show');
                imagesName.classList.add('hide');
            }
        }
    });
});

showAll.addEventListener('click', function() {
    for (let i = 0; i < images.length; i++) {
        images[i].classList.remove('hide');
        images[i].classList.add('show');
    }
});

images.forEach((image) => {
    image.addEventListener('click', (e) => {
        let imageUrl = e.path[0].currentSrc;
        previewImg.src = imageUrl
        previewContainer.classList.add('active');
        console.log(e.path[0].currentSrc);
    });
});

closeIcon.addEventListener('click', () => {
    previewContainer.classList.remove('active');
});

previewContainer.addEventListener('click', function(e) {
    if (!document.querySelector('.previewModal').contains(e.target)) {
        previewContainer.classList.remove('active');
    }
});

DEV Community

Filterable Image Gallery with preview using HTML, CSS, and Javascript

You may like these:

HTML Code

CSS Code

Javascript Code

Top comments (0)

Read next

Conclusion of My Node.js Journey and a Sneak Peek into My Upcoming AWS Series

Are Angular Resolvers on Life Support ?

My New Bootstrap 4 Card Generator

Ng-News 24/46: Angular Camp, TypeScript 5.7 RC