/* ArmanFarsi Lightbox Styles */ .armanfarsi-lightbox { display: none; /* Hidden by default, shown by JS */ position: fixed; z-index: 99999; /* Ensure it's on top */ top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); /* Slightly darker background */ justify-content: center; align-items: center; overflow: hidden; /* Prevent scrollbars on the lightbox itself */ } .armanfarsi-lightbox img.armanfarsi-lightbox-img { display: block; max-width: 90%; max-height: 85%; margin: auto; border-radius: 5px; box-shadow: 0 0 25px rgba(0, 0, 0, 0.5); /* Add transitions for smoother image loading (optional) */ transition: opacity 0.3s ease-in-out; opacity: 1; } /* Style for loading state (optional) */ .armanfarsi-lightbox img.armanfarsi-lightbox-img[src=""] { opacity: 0; } .armanfarsi-lightbox-close, .armanfarsi-lightbox-prev, .armanfarsi-lightbox-next { position: absolute; color: white; font-size: 35px; /* Slightly larger controls */ font-weight: bold; cursor: pointer; background: rgba(0, 0, 0, 0.4); padding: 5px 15px; /* Adjust padding */ border-radius: 5px; user-select: none; /* Prevent text selection */ transition: background 0.3s ease; } .armanfarsi-lightbox-close:hover, .armanfarsi-lightbox-prev:hover, .armanfarsi-lightbox-next:hover { background: rgba(0, 0, 0, 0.7); } .armanfarsi-lightbox-close { top: 15px; right: 25px; line-height: 1; /* Ensure consistent height */ } .armanfarsi-lightbox-prev, .armanfarsi-lightbox-next { top: 50%; transform: translateY(-50%); } .armanfarsi-lightbox-prev { left: 15px; } .armanfarsi-lightbox-next { right: 15px; } /* Add some basic styling for the gallery images themselves (optional) */ /* This ensures images in galleries have a pointer cursor */ .wp-block-gallery .blocks-gallery-item img, .wp-block-gallery .wp-block-image img, .gallery-item img { /* Classic editor gallery support */ cursor: pointer; transition: opacity 0.2s ease; } .wp-block-gallery .blocks-gallery-item img:hover, .wp-block-gallery .wp-block-image img:hover, .gallery-item img:hover { opacity: 0.85; } document.addEventListener('DOMContentLoaded', function() { const lightbox = document.getElementById('armanfarsi-lightbox'); const lightboxImg = document.getElementById('armanfarsi-lightbox-img'); const closeBtn = document.getElementById('armanfarsi-lightbox-close'); const prevBtn = document.getElementById('armanfarsi-lightbox-prev'); const nextBtn = document.getElementById('armanfarsi-lightbox-next'); // Ensure lightbox elements exist before proceeding if (!lightbox || !lightboxImg || !closeBtn || !prevBtn || !nextBtn) { // console.warn('ArmanFarsi Lightbox: Core HTML elements not found.'); return; } let currentImageIndex = 0; let galleryImages = []; // Array to hold image sources let galleryElements = []; // Array to hold the actual image elements // Find all images within WordPress galleries (Gutenberg blocks and classic editor) // Prioritize linked images if available, otherwise use the image itself const imageSelectors = [ '.wp-block-gallery .blocks-gallery-item a', // Gutenberg gallery item link '.wp-block-gallery .wp-block-image a', // Gutenberg single image link within gallery context (less common) '.gallery .gallery-item a' // Classic editor gallery item link ]; const imgSelectors = [ '.wp-block-gallery .blocks-gallery-item img', // Gutenberg gallery item image '.wp-block-gallery .wp-block-image img', // Gutenberg single image within gallery '.gallery .gallery-item img' // Classic editor gallery item image ]; // Find potential gallery containers const galleries = document.querySelectorAll('.wp-block-gallery, .gallery'); if (galleries.length === 0) { // console.log('ArmanFarsi Lightbox: No galleries found on this page.'); return; // No galleries, no need to proceed } galleries.forEach(gallery => { // Try finding links first within this specific gallery let items = gallery.querySelectorAll(imageSelectors.join(', ')); if (items.length > 0) { items.forEach((item, index) => { const imgElement = item.querySelector('img'); if (item.href && imgElement) { // Ensure it's a link with an image inside // Check if href points to an image file if (/\.(jpe?g|png|gif|webp|svg)$/i.test(item.href)) { galleryImages.push(item.href); // Use link's href for lightbox galleryElements.push(imgElement); // Attach listener to the img inside the link } else { // Link doesn't point to an image, use the img src instead galleryImages.push(imgElement.src); galleryElements.push(imgElement); } } }); } else { // If no links found, find images directly within this gallery items = gallery.querySelectorAll(imgSelectors.join(', ')); items.forEach((imgElement, index) => { if (imgElement.src) { galleryImages.push(imgElement.src); galleryElements.push(imgElement); } }); } }); if (galleryElements.length === 0) { // console.log('ArmanFarsi Lightbox: No suitable image elements found within galleries.'); return; // No images found in galleries } // Add click listeners to each gallery image element galleryElements.forEach((imgElement, index) => { imgElement.addEventListener('click', (event) => { // If the image is inside a link, prevent the default link behavior if (imgElement.closest('a')) { event.preventDefault(); } openLightbox(index); }); }); function openLightbox(index) { if (index < 0 || index >= galleryImages.length) { console.error('ArmanFarsi Lightbox: Invalid image index.'); return; } currentImageIndex = index; // Preload image slightly before showing lightbox (optional) const img = new Image(); img.onload = () => { lightboxImg.src = galleryImages[currentImageIndex]; lightbox.style.display = 'flex'; // Use flex to center content document.body.style.overflow = 'hidden'; // Prevent background scrolling }; img.onerror = () => { console.error('ArmanFarsi Lightbox: Failed to load image:', galleryImages[currentImageIndex]); // Optionally show an error message or close the lightbox // closeLightbox(); }; img.src = galleryImages[currentImageIndex]; // Start loading // Show loading indicator immediately (optional) lightboxImg.src = ""; // Clear previous image while loading lightbox.style.display = 'flex'; } function closeLightbox() { lightbox.style.display = 'none'; lightboxImg.src = ""; // Clear src document.body.style.overflow = ''; // Restore background scrolling } function changeImage(direction) { currentImageIndex += direction; if (currentImageIndex < 0) { currentImageIndex = galleryImages.length - 1; // Wrap to last } else if (currentImageIndex >= galleryImages.length) { currentImageIndex = 0; // Wrap to first } // Show loading state while new image loads lightboxImg.src = ""; // Preload the next image const img = new Image(); img.onload = () => { lightboxImg.src = galleryImages[currentImageIndex]; }; img.onerror = () => { console.error('ArmanFarsi Lightbox: Failed to load image:', galleryImages[currentImageIndex]); // Handle error, maybe try next/prev automatically or show placeholder }; img.src = galleryImages[currentImageIndex]; } // Event Listeners for controls closeBtn.addEventListener('click', closeLightbox); prevBtn.addEventListener('click', () => changeImage(-1)); nextBtn.addEventListener('click', () => changeImage(1)); // Close lightbox if clicking on the background overlay lightbox.addEventListener('click', (event) => { if (event.target === lightbox) { // Check if the click is directly on the background closeLightbox(); } }); // Keyboard navigation document.addEventListener('keydown', (event) => { if (lightbox.style.display === 'flex') { // Check if lightbox is open if (event.key === 'Escape') { closeLightbox(); } else if (event.key === 'ArrowLeft') { changeImage(-1); } else if (event.key === 'ArrowRight') { changeImage(1); } } }); });