CodeAlpha_ImageGallery/script.js at main · SamayKothari/CodeAlpha_ImageGallery · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
const images = [
  { src: "https://picsum.photos/id/10/800/600", title: "Misty Mountains", category: "nature" },
  { src: "https://picsum.photos/id/11/800/600", title: "Forest Path", category: "nature" },
  { src: "https://picsum.photos/id/12/800/600", title: "Ocean Waves", category: "nature" },
  { src: "https://picsum.photos/id/13/800/600", title: "Desert Landscape", category: "nature" },

  { src: "https://picsum.photos/id/217/800/600", title: "Dog Looking Up", category: "animals" },
  { src: "https://picsum.photos/id/237/800/600", title: "Cute Puppy", category: "animals" },
  { src: "https://picsum.photos/id/1025/800/600", title: "Pug", category: "animals" },
  { src: "https://picsum.photos/id/1074/800/600", title: "Lion", category: "animals" },

  { src: "https://picsum.photos/id/1/800/600", title: "Laptop Desk", category: "technology" },
  { src: "https://picsum.photos/id/2/800/600", title: "Workspace Setup", category: "technology" },
  { src: "https://picsum.photos/id/5/800/600", title: "Keyboard Mouse", category: "technology" },
  { src: "https://picsum.photos/id/180/800/600", title: "Macbook Pro", category: "technology" }
];

const gallery = document.getElementById("gallery");
const filterButtons = document.querySelectorAll(".filter-buttons button");

const lightbox = document.getElementById("lightbox");
const lightboxImg = document.getElementById("lightbox-img");
const closeBtn = document.getElementById("closeBtn");
const prevBtn = document.getElementById("prevBtn");
const nextBtn = document.getElementById("nextBtn");

let currentIndex = 0;
let filteredImages = [...images];

// Load Gallery
function loadGallery(data) {
  gallery.innerHTML = "";

  data.forEach((item, index) => {
    const div = document.createElement("div");
    div.classList.add("gallery-item");

    div.innerHTML = `
      <img src="${item.src}" alt="${item.title}">
      <div class="overlay">
        <span>${item.title}</span>
      </div>
    `;

    div.addEventListener("click", () => {
      openLightbox(index);
    });

    gallery.appendChild(div);
  });
}

// Filter Buttons
filterButtons.forEach(button => {
  button.addEventListener("click", () => {

    filterButtons.forEach(btn => btn.classList.remove("active"));
    button.classList.add("active");

    const filter = button.getAttribute("data-filter");

    if (filter === "all") {
      filteredImages = [...images];
    } else {
      filteredImages = images.filter(img => img.category === filter);
    }

    loadGallery(filteredImages);
  });
});

// Lightbox Functions
function openLightbox(index) {
  currentIndex = index;
  lightbox.style.display = "flex";
  lightboxImg.src = filteredImages[currentIndex].src;
}

closeBtn.addEventListener("click", () => {
  lightbox.style.display = "none";
});

prevBtn.addEventListener("click", () => {
  currentIndex = (currentIndex - 1 + filteredImages.length) % filteredImages.length;
  lightboxImg.src = filteredImages[currentIndex].src;
});

nextBtn.addEventListener("click", () => {
  currentIndex = (currentIndex + 1) % filteredImages.length;
  lightboxImg.src = filteredImages[currentIndex].src;
});

// Initial Load
loadGallery(images);