pezzi con le riviste

_site/assets/css/styles.css

@@ -105,8 +105,21 @@ body {
 
 .photo-grid {
     display: flex;
+    width: 100%;
     height: 100%;
-    width: fit-content;
+    scroll-snap-type: x mandatory;
+    overflow-x: auto;
+    scroll-behavior: smooth;
+}
+
+.photo-item {
+    flex: 0 0 100%;
+    width: 100%;
+    scroll-snap-align: start;
+    scroll-snap-stop: always;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .photo-info {
@@ -417,24 +430,25 @@ select:disabled {
 /* Simplified thumbnail navigation */
 .thumbnail-nav {
     position: fixed;
-    bottom: 40px;
+    bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
-    gap: 12px;
-    padding: 15px;
-    z-index: 1002;
+    gap: 8px;
+    padding: 10px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    transition: opacity 0.3s ease, pointer-events 0.3s ease;
+    z-index: 1000;
+    height: 60px;
+    width: 400px;
+    align-items: center;
     overflow-x: auto;
-    max-width: 80vw;
-    -webkit-overflow-scrolling: touch;
-    scroll-behavior: smooth;
-    scrollbar-width: none;
     -ms-overflow-style: none;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-    background: rgba(255, 255, 255, 0.8);
-    border-radius: 8px;
-    backdrop-filter: blur(5px);
+    scrollbar-width: none;
+    scroll-behavior: smooth;
+    mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
+    -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
 }
 
 .gallery-view:hover .thumbnail-nav,

_site/index.html

@@ -130,14 +130,6 @@ <h3>Debug Info:</h3>
 
 
 
-            <li>/img/2024-10-Milano/R0000348.PNG</li>
-
-
-
-            <li>/img/2024-10-Milano/R0000370.jpg</li>
-
-
-
             <li>/img/2024-10-Milano/R0000898.PNG</li>
 
 
@@ -362,14 +354,6 @@ <h1>A MAGNO</h1>
 
 
 
-            "/img/2024-10-Milano/R0000348.PNG",
-
-
-
-            "/img/2024-10-Milano/R0000370.jpg",
-
-
-
             "/img/2024-10-Milano/R0000898.PNG",
 
 
@@ -664,98 +648,102 @@ <h1>A MAGNO</h1>
         thumbnail.dataset.index = index;
 
         thumbnail.onclick = () => {
-            const offset = index * window.innerWidth;
-            photoGrid.scrollTo({
-                left: offset,
-                behavior: 'smooth'
-            });
+            const photoItem = photoGrid.children[index];
+            photoItem.scrollIntoView({ behavior: 'smooth' });
             updateThumbnails(index);
         };
         thumbnailNav.appendChild(thumbnail);
     });
 
     galleryView.appendChild(thumbnailNav);
 
-    photoGrid.addEventListener('scroll', () => {
-        const scrollPosition = photoGrid.scrollLeft;
-        const itemWidth = window.innerWidth;
-        const currentIndex = Math.round(scrollPosition / itemWidth);
-        if (currentIndex >= 0) {
-            updateThumbnails(currentIndex);
-        }
-    });
-
-    updateThumbnails(0);
-
+    // Add auto-hide functionality
     let navTimeout;
     const hideNav = () => {
         thumbnailNav.style.opacity = '0';
+        thumbnailNav.style.pointerEvents = 'none';
     };
-
-    galleryView.addEventListener('mousemove', () => {
+    
+    const showNav = () => {
         thumbnailNav.style.opacity = '1';
+        thumbnailNav.style.pointerEvents = 'auto';
         clearTimeout(navTimeout);
-        navTimeout = setTimeout(hideNav, 2000);
+        navTimeout = setTimeout(hideNav, 3000); // Hide after 3 seconds
+    };
+
+    // Show nav on any interaction
+    photoGrid.addEventListener('mousemove', showNav);
+    photoGrid.addEventListener('touchstart', showNav);
+    photoGrid.addEventListener('scroll', showNav);
+    thumbnailNav.addEventListener('mouseover', () => {
+        clearTimeout(navTimeout); // Keep nav visible while hovering
+        thumbnailNav.style.opacity = '1';
+        thumbnailNav.style.pointerEvents = 'auto';
     });
-
-    galleryView.classList.add('active');
-    document.body.style.overflow = 'hidden';
-
-    // Add keyboard navigation
+    thumbnailNav.addEventListener('mouseleave', () => {
+        navTimeout = setTimeout(hideNav, 3000);
+    });
+
+    // Initial show/hide
+    showNav();
+
+    // Simplified scroll handler
+    photoGrid.addEventListener('scroll', () => {
+        const index = Math.round(photoGrid.scrollLeft / photoGrid.offsetWidth);
+        updateThumbnails(index);
+    });
+
+    // Simplified keyboard navigation
     const handleKeydown = (event) => {
         const totalPhotos = folderImages.length;
-        const currentIndex = Math.round(photoGrid.scrollLeft / window.innerWidth);
+        const currentIndex = Math.round(photoGrid.scrollLeft / photoGrid.offsetWidth);
 
         if (event.key === 'ArrowRight' && currentIndex < totalPhotos - 1) {
-            const nextIndex = currentIndex + 1;
-            photoGrid.scrollTo({
-                left: nextIndex * window.innerWidth,
-                behavior: 'smooth'
-            });
-            updateThumbnails(nextIndex);
+            const nextItem = photoGrid.children[currentIndex + 1];
+            nextItem.scrollIntoView({ behavior: 'smooth' });
+            updateThumbnails(currentIndex + 1);
         } else if (event.key === 'ArrowLeft' && currentIndex > 0) {
-            const prevIndex = currentIndex - 1;
-            photoGrid.scrollTo({
-                left: prevIndex * window.innerWidth,
-                behavior: 'smooth'
-            });
-            updateThumbnails(prevIndex);
+            const prevItem = photoGrid.children[currentIndex - 1];
+            prevItem.scrollIntoView({ behavior: 'smooth' });
+            updateThumbnails(currentIndex - 1);
         }
     };
 
     document.addEventListener('keydown', handleKeydown);
 
+    // Initial position
+    if (initialPhotoIndex > 0) {
+        const targetItem = photoGrid.children[initialPhotoIndex];
+        targetItem.scrollIntoView({ behavior: 'instant' });
+        updateThumbnails(initialPhotoIndex);
+    }
+
+    galleryView.classList.add('active');
+    document.body.style.overflow = 'hidden';
+
     // Clean up event listener when gallery is closed
     const originalHideGallery = hideGallery;
     hideGallery = (event) => {
+        photoGrid.removeEventListener('mousemove', showNav);
+        photoGrid.removeEventListener('touchstart', showNav);
+        photoGrid.removeEventListener('scroll', showNav);
+        clearTimeout(navTimeout);
         document.removeEventListener('keydown', handleKeydown);
         originalHideGallery(event);
     };
-
-    // After loading images, ensure we're at the correct position
-    if (initialPhotoIndex > 0) {
-        setTimeout(() => {
-            photoGrid.scrollTo({
-                left: initialPhotoIndex * window.innerWidth,
-                behavior: 'smooth'
-            });
-            updateThumbnails(initialPhotoIndex);
-        }, 100);
-    } else {
-        // Ensure we're at the first image
-        photoGrid.scrollTo({
-            left: 0,
-            behavior: 'instant'
-        });
-        updateThumbnails(0);
-    }
 }
 
 function updateThumbnails(activeIndex) {
     const thumbnails = document.querySelectorAll('.thumbnail');
     const thumbnailNav = document.querySelector('.thumbnail-nav');
 
-    thumbnails.forEach((thumb) => thumb.classList.remove('active'));
+    if (!thumbnailNav || !thumbnails.length) return;
+
+    // Remove active class from all thumbnails
+    thumbnails.forEach(thumb => thumb.classList.remove('active'));
+
+    // Ensure activeIndex is within bounds
+    activeIndex = Math.max(0, Math.min(activeIndex, thumbnails.length - 1));
 
     const activeThumbnail = thumbnails[activeIndex];
     if (activeThumbnail) {
@@ -1034,16 +1022,21 @@ <h1>A MAGNO</h1>
 
 .photo-grid {
     display: flex;
+    width: 100%;
+    height: 100%;
     scroll-snap-type: x mandatory;
     overflow-x: auto;
     scroll-behavior: smooth;
-    width: 100%;
 }
 
 .photo-item {
-    scroll-snap-align: center;
-    width: 100vw;
-    flex-shrink: 0;
+    flex: 0 0 100%;
+    width: 100%;
+    scroll-snap-align: start;
+    scroll-snap-stop: always;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .gallery-view {

assets/css/styles.css

@@ -109,8 +109,21 @@ body {
 
 .photo-grid {
     display: flex;
+    width: 100%;
     height: 100%;
-    width: fit-content;
+    scroll-snap-type: x mandatory;
+    overflow-x: auto;
+    scroll-behavior: smooth;
+}
+
+.photo-item {
+    flex: 0 0 100%;
+    width: 100%;
+    scroll-snap-align: start;
+    scroll-snap-stop: always;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .photo-info {
@@ -421,24 +434,25 @@ select:disabled {
 /* Simplified thumbnail navigation */
 .thumbnail-nav {
     position: fixed;
-    bottom: 40px;
+    bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
-    gap: 12px;
-    padding: 15px;
-    z-index: 1002;
+    gap: 8px;
+    padding: 10px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    transition: opacity 0.3s ease, pointer-events 0.3s ease;
+    z-index: 1000;
+    height: 60px;
+    width: 400px;
+    align-items: center;
     overflow-x: auto;
-    max-width: 80vw;
-    -webkit-overflow-scrolling: touch;
-    scroll-behavior: smooth;
-    scrollbar-width: none;
     -ms-overflow-style: none;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-    background: rgba(255, 255, 255, 0.8);
-    border-radius: 8px;
-    backdrop-filter: blur(5px);
+    scrollbar-width: none;
+    scroll-behavior: smooth;
+    mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
+    -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
 }
 
 .gallery-view:hover .thumbnail-nav,