Author: | gulshancodes |
---|---|
Views Total: | 1,612 views |
Official Page: | Go to website |
Last Update: | August 16, 2022 |
License: | MIT |
Preview:

Description:
A modern, responsive, filterable photo gallery with pretty nice hover & lightbox effects.
How to use it:
1. Add your images to the gallery and categorize them using CSS classes.
<section id="gallery"> <div class="container"> <!-- Filterable Controls --> <ul class="gallery_tabs"> <li class="active" data-filter="all">All</li> <li data-filter="camera">Cameras</li> <li data-filter="laptop">Laptops</li> <li data-filter="mobile">Mobiles</li> <li data-filter="headphone">Headphones</li> </ul> <div class="gallery_wrapper"> <div class="gallery_item camera"> <img src="1.jpg" alt="img"> </div> <div class="gallery_item headphone"> <img src="2.jpg" alt="img"> </div> <div class="gallery_item laptop"> <img src="3.jpg" alt="img"> </div> <div class="gallery_item mobile"> <img src="4.jpg" alt="img"> </div> </div> <!-- Lightbox --> <div class="lightbox"> <div class="lightbox_wrapper"> <div class="lightbox_content"> <img src="" class="lightbox_img" alt="lightbox-img"> </div> </div> <div class="lightbox_close"> <span></span> <span></span> </div> </div> </div> </section>
2. The necessary CSS styles for the gallery & lightbox.
/*--====== Global Variables ======--*/ :root { --bg-color: #e0e2fc; --main-color: #4C57D5; --box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); } /*--====== CSS Reset ======--*/ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: Arial, Helvetica, sans-serif; background-color: var(--bg-color); } img { width: 100%; height: 100%; object-fit: cover; vertical-align: middle; } ul { list-style: none; } .overflow_hide { overflow: hidden; } /*--====== Gallery Section ======--*/ #gallery { padding-top: 2rem; padding-bottom: 2rem; } .container { max-width: 1440px; margin-left: auto; margin-right: auto; padding-left: 0.75rem; padding-right: 0.75rem; } /* Filterable Gallery */ .gallery_tabs { background-color: inherit; display: flex; flex-wrap: wrap; justify-content: space-evenly; row-gap: 0.8rem; padding: 1.2rem; border-radius: 50px; box-shadow: var(--box-shadow); } .gallery_tabs li { padding: 0.7rem 2rem; border-radius: 50px; font-size: 0.95rem; text-transform: uppercase; cursor: pointer; transition: all 0.3s ease; } .gallery_tabs li.active, .gallery_tabs li:hover { background-color: var(--main-color); color: #fff; } .gallery_wrapper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 4rem; } @media (max-width: 768px) { .gallery_wrapper { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; } } .gallery_item { border-radius: 10px; cursor: pointer; overflow: hidden; } /* when the gallery_item has 'show' class */ .gallery_item.show { animation: fadeIn 0.4s ease-in; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /* when the gallery_item has 'hide' class */ .gallery_item.hide { display: none; } .gallery_item img { transition: transform 0.3s ease; } .gallery_item:hover img { transform: scale(1.1); } /* Lightbox */ .lightbox { position: fixed; top: 0; left: 0; z-index: 995; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); overflow-x: hidden; overflow-y: auto; pointer-events: none; visibility: hidden; opacity: 0; transition: visibility 0.3s ease, opacity 0.3s ease; } /* when the lightbox is open */ .lightbox.open { pointer-events: all; visibility: visible; opacity: 1; } .lightbox_wrapper { display: grid; place-items: center; min-height: calc(100% - 3rem); margin: 1.5rem; } @media (max-width: 575.98px) { .lightbox_wrapper { margin: 0.5rem; min-height: calc(100% - 1rem); } } .lightbox_content { box-shadow: var(--box-shadow); max-width: 700px; width: 100%; border-radius: 10px; text-align: center; overflow: hidden; transform: scale(0); transition: transform 0.5s ease; } /* when Lightbox is open then lightbox-content will... */ .lightbox.open .lightbox_content { transform: scale(1); } /* lightbox-close-btn */ .lightbox_close { position: absolute; top: 3vh; right: 3vw; z-index: 999; width: 40px; height: 40px; display: flex; flex-direction: column; justify-content: center; cursor: pointer; overflow: hidden; } .lightbox_close span { width: 100%; height: 3px; margin-top: -1.5px; margin-bottom: -1.5px; background-color: #ddd; opacity: 0.7; transition: opacity 0.3s ease; } .lightbox_close:hover span { opacity: 1; } .lightbox_close span:first-child { transform: rotate(45deg); } .lightbox_close span:last-child { transform: rotate(-45deg); }
3. Enable the filter gallery and image lightbox.
/*===== Filterable Gallery with Lightbox ---=====*/ const body = document.body; const galleryTabs = document.querySelectorAll('.gallery_tabs li'); const galleryItems = document.querySelectorAll('.gallery_item'); const galleryImgs = document.querySelectorAll('.gallery_item img'); const lightbox = document.querySelector('.lightbox'); const lightboxImg = document.querySelector('.lightbox_img'); const lightboxCloseBtn = document.querySelector('.lightbox_close'); /*===== Gallery Filtering functionality =====*/ galleryTabs.forEach((currTab) => { currTab.addEventListener('click', (e) => { // removing the existing 'active' class from the tabs. e.target.parentElement.querySelector('.active').classList.remove('active'); // adding the 'active' class to the currently clicked tab. e.target.classList.add('active'); let filterValue = e.target.getAttribute('data-filter'); galleryItems.forEach((currItem) => { if (filterValue === 'all' || currItem.classList.contains(filterValue)) { currItem.classList.remove('hide'); currItem.classList.add('show'); } else { currItem.classList.remove('show'); currItem.classList.add('hide'); } }); }); }); /*===== Lightbox functionality =====*/ galleryImgs.forEach((currImg) => { currImg.addEventListener('click', (e) => { let imgSrc = e.target.getAttribute('src'); lightboxImg.setAttribute('src', imgSrc); lightbox.classList.add('open'); body.classList.add('overflow_hide'); }); }); // Function for closing the Lightbox const lightboxClose = () => { lightbox.classList.remove('open'); body.classList.remove('overflow_hide'); }; // closing the lightbox on clicking the lightboxClose btn. lightboxCloseBtn.addEventListener('click', lightboxClose); // closing the lightbox on clicking outside of it. window.addEventListener('click', (e) => { if (e.target.className === 'lightbox_wrapper') { lightboxClose(); } }); // closing the lightbox on pressing the Escape key. window.addEventListener('keydown', (e) => { if (e.key === 'Escape') { lightboxClose(); } });