Spaces:
Running
Running
File size: 6,401 Bytes
2a0bf7e | 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 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 | document.addEventListener('DOMContentLoaded', function() {
// Initialize Feather Icons
feather.replace();
// Gallery data
const galleryData = [
{ id: 1, category: 'wedding', src: 'http://static.photos/wedding/640x360/1', caption: 'Romantic wedding moment' },
{ id: 2, category: 'portrait', src: 'http://static.photos/portrait/640x360/2', caption: 'Professional headshot' },
{ id: 3, category: 'landscape', src: 'http://static.photos/landscape/640x360/3', caption: 'Mountain sunset' },
{ id: 4, category: 'product', src: 'http://static.photos/product/640x360/4', caption: 'Luxury watch' },
{ id: 5, category: 'wedding', src: 'http://static.photos/wedding/640x360/5', caption: 'First dance' },
{ id: 6, category: 'portrait', src: 'http://static.photos/portrait/640x360/6', caption: 'Family portrait' },
{ id: 7, category: 'landscape', src: 'http://static.photos/landscape/640x360/7', caption: 'Ocean view' },
{ id: 8, category: 'product', src: 'http://static.photos/product/640x360/8', caption: 'Cosmetics line' },
{ id: 9, category: 'wedding', src: 'http://static.photos/wedding/640x360/9', caption: 'Bride preparation' },
{ id: 10, category: 'portrait', src: 'http://static.photos/portrait/640x360/10', caption: 'Corporate portrait' },
{ id: 11, category: 'landscape', src: 'http://static.photos/landscape/640x360/11', caption: 'Forest path' },
{ id: 12, category: 'product', src: 'http://static.photos/product/640x360/12', caption: 'Fashion accessories' }
];
// Lightbox elements
const lightbox = document.getElementById('lightbox');
const lightboxImg = document.getElementById('lightbox-img');
const lightboxCaption = document.getElementById('lightbox-caption');
const closeLightbox = document.getElementById('close-lightbox');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
// Current image index for lightbox navigation
let currentImageIndex = 0;
let filteredImages = [];
// Initialize gallery
function initGallery() {
const galleryContainer = document.querySelector('.masonry-grid');
galleryContainer.innerHTML = '';
// Create gallery items
filteredImages.forEach((item, index) => {
const galleryItem = document.createElement('div');
galleryItem.className = 'gallery-item cursor-pointer';
galleryItem.dataset.category = item.category;
galleryItem.dataset.index = index;
galleryItem.innerHTML = `
<div class="category-label">${item.category}</div>
<img src="${item.src}" alt="${item.caption}" loading="lazy">
`;
galleryItem.addEventListener('click', () => openLightbox(index));
galleryContainer.appendChild(galleryItem);
});
}
// Filter gallery by category
function filterGallery(category) {
if (category === 'all') {
filteredImages = [...galleryData];
} else {
filteredImages = galleryData.filter(item => item.category === category);
}
initGallery();
}
// Open lightbox
function openLightbox(index) {
currentImageIndex = index;
lightboxImg.src = filteredImages[index].src;
lightboxCaption.textContent = filteredImages[index].caption;
lightbox.classList.add('show');
lightbox.classList.remove('hidden');
document.body.style.overflow = 'hidden';
}
// Close lightbox
function closeLightboxHandler() {
lightbox.classList.remove('show');
lightbox.classList.add('hidden');
document.body.style.overflow = '';
}
// Navigate to previous image
function prevImage() {
currentImageIndex = (currentImageIndex - 1 + filteredImages.length) % filteredImages.length;
lightboxImg.src = filteredImages[currentImageIndex].src;
lightboxCaption.textContent = filteredImages[currentImageIndex].caption;
}
// Navigate to next image
function nextImage() {
currentImageIndex = (currentImageIndex + 1) % filteredImages.length;
lightboxImg.src = filteredImages[currentImageIndex].src;
lightboxCaption.textContent = filteredImages[currentImageIndex].caption;
}
// Initialize filter buttons
function initFilterButtons() {
const filterButtons = document.querySelectorAll('.filter-btn');
filterButtons.forEach(button => {
button.addEventListener('click', function() {
// Remove active class from all buttons
filterButtons.forEach(btn => btn.classList.remove('active'));
// Add active class to clicked button
this.classList.add('active');
// Filter gallery
filterGallery(this.dataset.filter);
});
});
}
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
targetElement.scrollIntoView({
behavior: 'smooth'
});
}
});
});
// Initialize everything
filteredImages = [...galleryData];
initGallery();
initFilterButtons();
// Lightbox event listeners
closeLightbox.addEventListener('click', closeLightboxHandler);
prevBtn.addEventListener('click', prevImage);
nextBtn.addEventListener('click', nextImage);
lightbox.addEventListener('click', function(e) {
if (e.target === lightbox) {
closeLightboxHandler();
}
});
// Keyboard navigation for lightbox
document.addEventListener('keydown', function(e) {
if (!lightbox.classList.contains('hidden')) {
if (e.key === 'Escape') {
closeLightboxHandler();
} else if (e.key === 'ArrowLeft') {
prevImage();
} else if (e.key === 'ArrowRight') {
nextImage();
}
}
});
}); |