'); printWindow.document.close(); // Use the onload event to ensure the image loads before printing, making it more robust. const imgElement = printWindow.document.getElementById('printImg'); const handlePrint = () => { // Ensure print dialog opens before closing the window printWindow.print(); }; if (imgElement && !imgElement.complete) { // If not complete, wait for the image to load imgElement.onload = handlePrint; imgElement.onerror = handlePrint; // If image fails to load, try printing anyway } else { // If image is already complete or loaded from cache, print immediately handlePrint(); } } // Thumbnail toggle function (simulates the side panel collapse) function toggleThumbnails() { const isHidden = thumbnailPanel.classList.toggle('hidden'); // Get the current icon element const toggleIconElement = document.getElementById('toggle-icon'); // Icon definitions (Right Arrow means Close, Left Arrow means Open) const iconOpen = ``; // Left Arrow const iconClose = ``; // Right Arrow // Toggle the layout class on the main grid container (Only relevant for MD screens and up) if (window.innerWidth >= 768) { // md breakpoint in Tailwind is 768px if (isHidden) { // Hidden state -> Show OPEN icon (Left Arrow) galleryGrid.classList.remove('md:grid-cols-3'); galleryGrid.classList.add('md:grid-cols-1'); mainImageColumn.classList.remove('md:col-span-2'); mainImageColumn.classList.add('md:col-span-1'); toggleIconElement.innerHTML = iconOpen; } else { // Visible state -> Show CLOSE icon (Right Arrow) galleryGrid.classList.add('md:grid-cols-3'); galleryGrid.classList.remove('md:grid-cols-1'); mainImageColumn.classList.add('md:col-span-2'); mainImageColumn.classList.remove('md:col-span-1'); toggleIconElement.innerHTML = iconClose; } } else { // On mobile (below md), the thumbnail panel just hides/shows below the main image toggleIconElement.innerHTML = isHidden ? iconOpen : iconClose; } } // Function to open the zoom modal function openModal(imgSrc) { modal.style.display = "flex"; // Use flex to center content modalImg.src = imgSrc; } // Function to close the zoom modal function closeModal() { modal.style.display = "none"; } // Close the modal when the user clicks anywhere outside of the image window.onclick = function(event) { if (event.target == modal) { closeModal(); } } // Function to generate thumbnails and initialize gallery function initializeGallery() { IMAGE_URLS.forEach((url, index) => { const thumbnail = document.createElement('img'); const displayIndex = index + 1; thumbnail.src = url; thumbnail.alt = `Lookbook Image ${displayIndex}`; // Set max-h-[150px] for uniform height thumbnail.className = 'thumbnail w-full h-auto max-h-[150px] object-cover rounded-lg shadow-md cursor-pointer hover:shadow-xl transition-shadow duration-300 border-2 border-transparent hover:border-blue-500'; thumbnail.setAttribute('data-full-src', url); thumbnail.setAttribute('data-index', displayIndex); // Thumbnail click handler uses the index thumbnail.onclick = () => changeMainImage(index); thumbnailsContainer.appendChild(thumbnail); }); // Initialize by setting the first image as active (index 0) changeMainImage(0); } window.onload = initializeGallery;