Responsive Filterable Image Gallery using HTML CSS & JavaScript | Responsive Filterable Image Gallery with Lightbox | Responsive Filterable Image Gallery with Previous, next button | On Mobile View Dropdown Feature

HTML CSS और JavaScript का उपयोग करके Responsive Filterable Image Gallery बनाना | Responsive Filterable Image Gallery लाइटबॉक्स के साथ | Responsive Filterable Image Gallery पिछला, अगला बटन के साथ | मोबाइल दृश्य पर ड्रॉपडाउन सुविधा

Features Filtrable Image Gallery

1. Responsive design.

2. Easy understand.

3. Previous next button.

4. Light Box.

5. On mobile view dropdown feature.

Filtrable image gallery code:

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

margin: 0px;

}

h1 {

text-align: center;

margin-top: 30px;

margin-bottom: 70px;

}

.tab {

padding: 10px 30px;

}

.tabs {

display: flex;

justify-content: space-around;

height: unset;

max-width: 950px;

margin: 0 auto;

flex-wrap: wrap;

gap: 12px;

}

.row {

margin-left: 0px !important;

}

.fa,

.fas {

font-weight: 600 !important;

font-size: 30px !important;

}

.tabs>* {

color: dimgray;

height: 100%;

cursor: pointer;

display: flex;

justify-content: center;

align-items: center;

font-size: 15px;

font-weight: 500;

color: #0f8182;

border-radius: 50px;

border: 2px solid #0f8182;

transition: all 0.3s ease;

}

.tabs>*:hover:not(.active) {

background-color: #0f8182;

color: #fff;

}

.tabs>.active {

color: white;

background-color: #0f8182;

}

.panel {

display: none;

}

.panel.active {

display: block;

}

#gallery {

padding-top: 40px !important;

padding: 0px 15px;

}

.image {

width: 100%;

}

.img-wrapper {

position: relative;

grid-gap: 12px;

height: 100%;

}

.row {

display: grid;

grid-template-columns: 24% 24% 24% 24%;

grid-gap: 12px;

justify-content: center;

}

.img-wrapper img {

width: 100%;

height: 100%;

}

.img-overlay {

background: rgba(0, 0, 0, 0.7);

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

opacity: 0;

}

.img-overlay i {

color: #fff;

font-size: 3em;

}

#overlay {

background: rgba(0, 0, 0, 0.7);

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

display: flex;

justify-content: center;

align-items: center;

z-index: 999;

}

#overlay img {

margin: 0;

width: 80%;

height: auto;

object-fit: contain;

padding: 5%;

}

#nextButton {

color: #fff;

font-size: 2em;

transition: opacity 0.8s;

}

#nextButton:hover {

opacity: 0.7;

}

#prevButton {

color: #fff;

font-size: 2em;

transition: opacity 0.8s;

}

#prevButton:hover {

opacity: 0.7;

}

#exitButton {

color: #fff;

font-size: 2em;

transition: opacity 0.8s;

position: absolute;

top: 15px;

right: 15px;

}

nav {

display: flex;

justify-content: center;

}

.items span.active,

.items span:hover {

color: #fff;

background: #0f8182;

}

.items span {

padding: 7px 25px;

font-size: 15px;

font-weight: 500;

cursor: pointer;

color: #0f8182;

border-radius: 50px;

border: 2px solid #0f8182;

transition: all 0.3s ease;

}

.items {

display: flex;

max-width: 820px;

width: 100%;

margin-top: 20px;

margin-bottom: 20px;

justify-content: space-between;

}

#exitButton:hover {

opacity: 0.7;

}

@media (min-width:326px) and (max-width:760px) {

.tabs {

gap: unset !important;

}

.container {

margin-left: 10px !important;

margin-right: 10px !important;

}

.row {

grid-template-columns: 100% !important;

margin-left: 5px !important;

margin-right: 5px !important;

}

.tabs {

height: unset;

flex-wrap: wrap !important;

}

.tab {

padding: 7px !important;

}

.tabs>* {

width: 40% !important;

margin: 8px 0px !important;

}

/*dropdown*/

.dropdown {

width: 100%;

background-color: #0f8182;

}

.dropdown-content {

width: 100%;

}

.dropbtn {

background-color: #0f8182;

color: white;

font-size: 16px;

border: none;

text-align: left !important;

height: 50px;

text-transform: capitalize;

}

.dropdown {

position: relative;

display: inline-block;

}

.dropdown-content {

display: none;

position: absolute;

background-color: #f1f1f1;

box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

z-index: 1;

}

.dropdown-content a:hover {

background-color: #0f8182;

color: #ffffff

}

.dropdown:hover .dropdown-content {

display: block;

}

.dropdown-content a {

color: black;

padding: 12px 16px;

text-decoration: none;

display: block;

}

@media(min-width:326px) and (max-width:760px) {

div#shopify-section-header {

height: 162px !important;

}

@media (min-width:768px) and (max-width:800px) {

.row {

grid-template-columns: 50% 50% !important;

}

section#shopify-section-gallery-custom .spaced-section {

margin-top: 53px !important;

}

@media (min-width:999px) and (max-width:1024px) {

section#shopify-section-gallery-custom .spaced-section {

margin-top: 53px !important;

}

@media (min-width:320px) and (max-width:325px) {

.tabs>* {

width: 46% !important;

font-size: 11px;

}

.tab {

padding: 5px 10px !important;

}

div#shopify-section-header {

height: 151px !important;

}

@media(max-width:760px) {

div#panels {

margin-top: 85px;

}

.scrolled-down .dropdown {

position: fixed;

top: 181px;

display: inline-block;

z-index: 999999;

}

.dropdown {

width: 100%;

background-color: #0f8182;

}

#gallery .container {

margin-left: 20px !important;

margin-right: 20px !important;

}

section#shopify-section-gallery-custom .spaced-section {

margin-top: 0px !important;

margin-left: 0px !important;

margin-right: 0px !important;

}

.tabs {

display: none;

}

.tab {

padding: 12px !important;

}

@media(min-width:1050px) {

section#shopify-section-gallery-custom .spaced-section {

margin-bottom: 115px !important;

}

@media screen and (min-width:768px) {

#overlay img {

width: 60%;

}

#nextButton {

font-size: 3em;

}

#exitButton {

font-size: 3em;

}

#prevButton {

font-size: 3em;

}

.dropdown {

display: none;

}

@media screen and (min-width:1200px) {

#overlay img {

width: 50%;

}

</style>

</head>

<body>

<h1>Filtrable Image Gallery</h1>

<button class="dropbtn">Dropdown</button>

</div>

<div class="tab" data-target="Category1">Category1</div>

<div class="tab" data-target="Category2">Category2</div>

<div class="tab" data-target="Category3">Category3</div>

<div class="tab" data-target="Category4">Category4</div>

<div class="tab" data-target="Category5">Category5</div>

<div class="tab" data-target="Category6">Category6</div>

<div class="tab" data-target="Category7">Category7</div>

<div class="tab" data-target="Category8">Category8</div>

<div class="tab" data-target="Category9">Category9</div>

<div class="tab" data-target="Category10">Category10</div>

<div class="tab" data-target="Category11">Category11</div>

</div>

<div class="tab" data-target="Category1">Category1</div>

<div class="tab" data-target="Category2">Category2</div>

<div class="tab" data-target="Category3">Category3</div>

<div class="tab" data-target="Category4">Category4</div>

<div class="tab" data-target="Category5">Category5</div>

<div class="tab" data-target="Category6">Category6</div>

<div class="tab" data-target="Category7">Category7</div>

<div class="tab" data-target="Category8">Category8</div>

<div class="tab" data-target="Category9">Category9</div>

<div class="tab" data-target="Category10">Category10</div>

<div class="tab" data-target="Category11">Category11</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</section>

jQuery(document).ready(function ($) {

$(".img-wrapper").hover(

function () {

$(this).find(".img-overlay").animate({ opacity: 1 }, 600);

}, function () {

$(this).find(".img-overlay").animate({ opacity: 0 }, 600);

}

);

var $overlay = $('<div id="overlay"></div>');

var $image = $("<img>");

var $prevButton = $('<div id="prevButton"><i class="fa fa-chevron-left"></i></div>');

var $nextButton = $('<div id="nextButton"><i class="fa fa-chevron-right"></i></div>');

var $exitButton = $('<div id="exitButton"><i class="fa fa-times"></i></div>');

$overlay.append($image).prepend($prevButton).append($nextButton).append($exitButton);

$("#gallery").append($overlay);

$overlay.hide();

$(".img-overlay").click(function (event) {

event.preventDefault();

var imageLocation = $(this).prev().attr("href");

$image.attr("src", imageLocation);

$overlay.fadeIn("slow");

});

$overlay.click(function () {

$(this).fadeOut("slow");

});

// When next button is clicked

$nextButton.click(function (event) {

// Hide the current image

$("#overlay img").hide();

// Overlay image location

var $currentImgSrc = $("#overlay img").attr("src");

// Image with matching location of the overlay image

var $currentImg = $('#image-gallery img[src="' + $currentImgSrc + '"]');

// Finds the next image

var $nextImg = $($currentImg.closest(".image").next().find("img"));

// All of the images in the gallery

var $images = $("#image-gallery img");

// If there is a next image

if ($nextImg.length > 0) {

// Fade in the next image

$("#overlay img").attr("src", $nextImg.attr("src")).fadeIn(800);

} else {

// Otherwise fade in the first image

$("#overlay img").attr("src", $($images[0]).attr("src")).fadeIn(800);

}

// Prevents overlay from being hidden

event.stopPropagation();

});

// When previous button is clicked

$prevButton.click(function (event) {

// Hide the current image

$("#overlay img").hide();

// Overlay image location

var $currentImgSrc = $("#overlay img").attr("src");

// Image with matching location of the overlay image

var $currentImg = $('#image-gallery img[src="' + $currentImgSrc + '"]');

// Finds the next image

var $nextImg = $($currentImg.closest(".image").prev().find("img"));

// Fade in the next image

$("#overlay img").attr("src", $nextImg.attr("src")).fadeIn(800);

// Prevents overlay from being hidden

event.stopPropagation();

});

// When the exit button is clicked

$exitButton.click(function () {

// Fade out the overlay

$("#overlay").fadeOut("slow");

});

const tabs = document.querySelectorAll(".tabs");

const tab = document.querySelectorAll(".tab");

const panel = document.querySelectorAll(".panel");

function onTabClick(event) {

// deactivate existing active tabs and panel

for (let i = 0; i < tab.length; i++) {

tab[i].classList.remove("active");

}

for (let i = 0; i < panel.length; i++) {

panel[i].classList.remove("active");

}

// activate new tabs and panel

event.target.classList.add('active');

let classString = event.target.getAttribute('data-target');

console.log(classString);

document.getElementById('panels').getElementsByClassName(classString)[0].classList.add("active");

}

for (let i = 0; i < tab.length; i++) {

tab[i].addEventListener('click', onTabClick, false);

}

$(document).ready(function () {

$(".tab").click(function () {

$(".dropdown-content").hide();

});

$(".dropbtn").click(function () {

$(".dropdown-content").show();

});

/*scroll*/

if ($(window).innerWidth() <= 751) {

$(document).ready(function () {

$(".tab").click(function () {

$([document.documentElement, document.body]).animate({

scrollTop: $(".tabs").offset().top

});

}

function myFunction(x) {

if (x.matches) { // If media query matches

$(document).ready(function () {

$(".tab").click(function () {

$([document.documentElement, document.body]).animate({

scrollTop: $(".tabs").offset().top

});

} else {

document.body.style.backgroundColor = "#ffffff";

}

var x = window.matchMedia("(max-width: 700px)")

myFunction(x)

x.addListener(myFunction)

</script>

</body>

</html>

How to make Responsive Filterable Image Gallery using HTML CSS & JavaScript | Responsive Filterable Image Gallery with Lightbox

Features Filtrable Image Gallery

Filtrable image gallery code:

Output

Related Post

Learn By Preet