'', // Comma-separated list of image URLs ], $atts, 'simple_image_gallery' ); $image_urls_str = trim($atts['images']); if (empty($image_urls_str)) { return '

Simple Image Gallery: Please provide image URLs in the "images" attribute.

'; } $image_urls = array_map('trim', explode(',', $image_urls_str)); $image_urls = array_filter($image_urls); // Remove empty entries if (empty($image_urls)) { return '

Simple Image Gallery: No valid image URLs found.

'; } // Enqueue assets only when the shortcode is used wp_enqueue_style('sig-gallery-style'); wp_enqueue_script('sig-gallery-script'); // Pass image data to the script // Use a unique ID in case multiple galleries are on the page $gallery_id = 'sig-gallery-' . uniqid(); wp_localize_script('sig-gallery-script', 'sigGalleryData_' . $gallery_id, [ 'images' => $image_urls, 'galleryId' => $gallery_id, ]); // Start output buffering ob_start(); ?>

$image_url) : ?> Gallery Image <?php echo $index + 1; ?>

/* Simple Image Gallery Styles */ .sig-gallery-container { margin-bottom: 20px; } .sig-gallery { display: flex; flex-wrap: wrap; /* Allow wrapping */ justify-content: center; /* Center thumbnails */ gap: 10px; } .sig-gallery img { width: 100px; height: 100px; object-fit: cover; /* Ensure images cover the area */ cursor: pointer; border-radius: 5px; border: 1px solid #ddd; transition: transform 0.2s ease-in-out; } .sig-gallery img:hover { transform: scale(1.05); } .sig-lightbox { display: none; /* Hidden by default */ 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); /* Darker background */ justify-content: center; align-items: center; padding: 20px; /* Add padding around */ box-sizing: border-box; /* Include padding in dimensions */ } .sig-lightbox img.sig-lightbox-img { display: block; max-width: 90%; /* Limit width */ max-height: 85%; /* Limit height */ border-radius: 5px; margin: auto; /* Center image */ object-fit: contain; /* Ensure whole image is visible */ } .sig-close, .sig-prev, .sig-next { position: absolute; color: white; font-size: 35px; /* Slightly larger */ 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.2s ease; } .sig-close:hover, .sig-prev:hover, .sig-next:hover { background: rgba(0, 0, 0, 0.7); } .sig-close { top: 15px; right: 25px; } /* Position arrows vertically centered */ .sig-prev, .sig-next { top: 50%; transform: translateY(-50%); } .sig-prev { left: 15px; } .sig-next { right: 15px; } /* Basic Responsive Adjustments */ @media (max-width: 600px) { .sig-gallery img { width: 80px; height: 80px; } .sig-close, .sig-prev, .sig-next { font-size: 25px; padding: 5px 10px; } .sig-close { top: 10px; right: 15px; } .sig-prev { left: 10px; } .sig-next { right: 10px; } .sig-lightbox img.sig-lightbox-img { max-width: 95%; max-height: 80%; } } document.addEventListener('DOMContentLoaded', function() { // Find all gallery containers on the page const galleryContainers = document.querySelectorAll('.sig-gallery-container'); galleryContainers.forEach(container => { const galleryId = container.id; // Access the localized data specific to this gallery instance const galleryData = window['sigGalleryData_' + galleryId]; if (!galleryData) { console.error('Gallery data not found for gallery ID:', galleryId); return; // Skip if data is missing } const images = galleryData.images; let currentImageIndex = 0; const gallery = container.querySelector('.sig-gallery'); const lightbox = container.querySelector('.sig-lightbox'); const lightboxImg = container.querySelector('.sig-lightbox-img'); const closeBtn = container.querySelector('.sig-close'); const prevBtn = container.querySelector('.sig-prev'); const nextBtn = container.querySelector('.sig-next'); const galleryImages = gallery.querySelectorAll('img'); function openLightbox(index) { if (index >= 0 && index < images.length) { currentImageIndex = index; lightboxImg.src = images[currentImageIndex]; lightbox.style.display = 'flex'; // Add class to body to prevent scrolling when lightbox is open document.body.style.overflow = 'hidden'; } } function closeLightbox() { lightbox.style.display = 'none'; lightboxImg.src = ''; // Clear src // Restore body scrolling document.body.style.overflow = ''; } function changeImage(direction) { currentImageIndex += direction; if (currentImageIndex < 0) { currentImageIndex = images.length - 1; } else if (currentImageIndex >= images.length) { currentImageIndex = 0; } // Preload next image slightly for smoother transition (optional) // const nextIndex = (currentImageIndex + direction + images.length) % images.length; // const imgPreload = new Image(); // imgPreload.src = images[nextIndex]; lightboxImg.src = images[currentImageIndex]; } // Add click listeners to gallery thumbnails galleryImages.forEach(img => { img.addEventListener('click', function() { const index = parseInt(this.getAttribute('data-index'), 10); openLightbox(index); }); // Add keyboard accessibility img.addEventListener('keydown', function(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); // Prevent default space scroll const index = parseInt(this.getAttribute('data-index'), 10); openLightbox(index); } }); // Make thumbnails focusable img.setAttribute('tabindex', '0'); }); // Add click listeners to lightbox controls closeBtn.addEventListener('click', closeLightbox); prevBtn.addEventListener('click', () => changeImage(-1)); nextBtn.addEventListener('click', () => changeImage(1)); // Close lightbox on clicking the background (outside the image) lightbox.addEventListener('click', function(e) { if (e.target === lightbox) { // Check if the click is directly on the background closeLightbox(); } }); // Add keyboard navigation for lightbox document.addEventListener('keydown', function(e) { if (lightbox.style.display === 'flex') { // Only act if lightbox is open if (e.key === 'Escape') { closeLightbox(); } else if (e.key === 'ArrowLeft') { changeImage(-1); } else if (e.key === 'ArrowRight') { changeImage(1); } } }); }); });