document.addEventListener('DOMContentLoaded', function() {
const galleryGrid = document.getElementById('galleryGrid');
const filterButtons = document.querySelectorAll('.filter-btn');
const sortSelect = document.getElementById('sortSelect');
const lightbox = document.getElementById('lightbox');
const lightboxImage = document.getElementById('lightboxImage');
const lightboxCaption = document.getElementById('lightboxCaption');
const lightboxClose = document.getElementById('lightboxClose');
const lightboxPrev = document.getElementById('lightboxPrev');
const lightboxNext = document.getElementById('lightboxNext');
const currentCount = document.getElementById('currentCount');
const totalCount = document.getElementById('totalCount');
const galleryData = [
{
id: 1,
title: "Mountain Landscape",
category: "nature",
tags: ["landscape", "mountains", "sunset"],
url: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&h=400&fit=crop",
date: "2023-05-15"
},
{
id: 2,
title: "Urban Skyline",
category: "urban",
tags: ["city", "skyline", "night"],
url: "https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=600&h=400&fit=crop",
date: "2023-06-22"
},
{
id: 3,
title: "Portrait of Jane",
category: "people",
tags: ["portrait", "woman", "smile"],
url: "https://images.unsplash.com/photo-1494790108755-2616b612b786?w=600&h=400&fit=crop",
date: "2023-07-10"
},
{
id: 4,
title: "Forest Pathway",
category: "nature",
tags: ["forest", "trees", "path"],
url: "https://images.unsplash.com/photo-1448375240586-882707db888b?w=600&h=400&fit=crop",
date: "2023-08-05"
},
{
id: 5,
title: "City Lights",
category: "urban",
tags: ["city", "lights", "night"],
url: "https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=600&h=400&fit=crop",
date: "2023-09-18"
},
{
id: 6,
title: "Beach Sunset",
category: "nature",
tags: ["beach", "sunset", "ocean"],
url: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=600&h=400&fit=crop",
date: "2023-10-30"
},
{
id: 7,
title: "Business Meeting",
category: "people",
tags: ["business", "meeting", "office"],
url: "https://images.unsplash.com/photo-1551836022-d5d88e9218df?w=600&h=400&fit=crop",
date: "2023-11-12"
},
{
id: 8,
title: "Street Art",
category: "urban",
tags: ["street", "art", "graffiti"],
url: "https://images.unsplash.com/photo-1493246507139-91e8fad9978e?w=600&h=400&fit=crop",
date: "2023-12-03"
},
{
id: 9,
title: "Coffee Shop",
category: "people",
tags: ["coffee", "shop", "cafe"],
url: "https://images.unsplash.com/photo-1554866585-cd94860890b7?w=600&h=400&fit=crop",
date: "2024-01-15"
},
{
id: 10,
title: "Desert Dunes",
category: "nature",
tags: ["desert", "dunes", "sand"],
url: "https://images.unsplash.com/photo-1509316785289-025f5b8b4c06?w=600&h=400&fit=crop",
date: "2024-02-20"
},
{
id: 11,
title: "Modern Architecture",
category: "urban",
tags: ["architecture", "building", "modern"],
url: "https://images.unsplash.com/photo-1494790108755-2616b612b786?w=600&h=400&fit=crop",
date: "2024-03-08"
},
{
id: 12,
title: "Family Portrait",
category: "people",
tags: ["family", "portrait", "love"],
url: "https://images.unsplash.com/photo-1511942142245-1e43b0b2d7d9?w=600&h=400&fit=crop",
date: "2024-04-17"
}
];
let currentFilter = 'all';
let currentSort = 'newest';
let currentImageIndex = 0;
let filteredData = [];
function initGallery() {
renderGallery();
setupEventListeners();
}
function setupEventListeners() {
filterButtons.forEach(button => {
button.addEventListener('click', function() {
filterButtons.forEach(btn => btn.classList.remove('active'));
this.classList.add('active');
currentFilter = this.getAttribute('data-filter');
renderGallery();
});
});
sortSelect.addEventListener('change', function() {
currentSort = this.value;
renderGallery();
});
lightboxClose.addEventListener('click', closeLightbox);
lightboxPrev.addEventListener('click', showPrevImage);
lightboxNext.addEventListener('click', showNextImage);
lightbox.addEventListener('click', function(e) {
if (e.target === lightbox) {
closeLightbox();
}
});
document.addEventListener('keydown', function(e) {
if (lightbox.style.display === 'flex') {
if (e.key === 'Escape') {
closeLightbox();
} else if (e.key === 'ArrowLeft') {
showPrevImage();
} else if (e.key === 'ArrowRight') {
showNextImage();
}
}
});
}
function renderGallery() {
filteredData = currentFilter === 'all' ?
[...galleryData] :
galleryData.filter(item => item.category === currentFilter);
filteredData.sort((a, b) => {
switch (currentSort) {
case 'newest':
return new Date(b.date) - new Date(a.date);
case 'oldest':
return new Date(a.date) - new Date(b.date);
case 'name':
return a.title.localeCompare(b.title);
default:
return 0;
}
});
galleryGrid.innerHTML = '';
filteredData.forEach((item, index) => {
const galleryItem = document.createElement('div');
galleryItem.className = 'gallery-item loading';
galleryItem.innerHTML = `
<img src="\${item.url}" alt="\${item.title}" onload="this.parentElement.classList.remove('loading')">
<div class="overlay">
<div class="title">\${item.title}</div>
<div class="category">\${item.category}</div>
<div class="tags">
\${item.tags.map(tag => `<span class="tag">\${tag}</span>`).join('')}
</div>
</div>
`;
galleryItem.addEventListener('click', () => {
openLightbox(index);
});
galleryGrid.appendChild(galleryItem);
});
currentCount.textContent = filteredData.length;
totalCount.textContent = galleryData.length;
}
function openLightbox(index) {
currentImageIndex = index;
const item = filteredData[index];
lightboxImage.src = item.url;
lightboxCaption.textContent = item.title;
lightbox.style.display = 'flex';
document.body.style.overflow = 'hidden';
lightboxContent.style.animation = 'zoomIn 0.3s ease-out';
}
function closeLightbox() {
lightbox.style.display = 'none';
document.body.style.overflow = 'auto';
}
function showPrevImage() {
currentImageIndex = (currentImageIndex - 1 + filteredData.length) % filteredData.length;
const item = filteredData[currentImageIndex];
lightboxImage.src = item.url;
lightboxCaption.textContent = item.title;
lightboxImage.style.animation = 'fadeIn 0.3s ease-out';
setTimeout(() => {
lightboxImage.style.animation = '';
}, 300);
}
function showNextImage() {
currentImageIndex = (currentImageIndex + 1) % filteredData.length;
const item = filteredData[currentImageIndex];
lightboxImage.src = item.url;
lightboxCaption.textContent = item.title;
lightboxImage.style.animation = 'fadeIn 0.3s ease-out';
setTimeout(() => {
lightboxImage.style.animation = '';
}, 300);
}
initGallery();
});