swa

amgno · Dec 8, 2024 · cfb9e57 · cfb9e57
1 parent 00b419d
commit cfb9e57
Show file tree

Hide file tree

Showing 4 changed files with 142 additions and 8 deletions.
diff --git a/_site/assets/css/styles.css b/_site/assets/css/styles.css
@@ -234,4 +234,37 @@ select {
     .main-content.gallery-open {
         width: 100%;
     }
+}
+
+/* New styles for thumbnail navigation */
+.thumbnail-nav {
+    position: fixed;
+    bottom: 40px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 10px;
+    padding: 15px;
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 4px;
+    z-index: 1002;
+}
+
+.thumbnail {
+    width: 60px;
+    height: 40px;
+    background: #f0f0f0;
+    cursor: pointer;
+    opacity: 0.6;
+    transition: opacity 0.2s;
+}
+
+.thumbnail img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.thumbnail.active {
+    opacity: 1;
 } 
diff --git a/_site/index.html b/_site/index.html
@@ -218,10 +218,14 @@ <h1>A MAGNO</h1>
 
     // Filter images for this folder
     const folderImages = imageData.images.filter(img => img.folder === folderPath);
-    console.log('Images found for folder:', folderImages);
 
-    // Add images to gallery
-    folderImages.forEach(image => {
+    // Create thumbnail navigation
+    const thumbnailNav = document.createElement('div');
+    thumbnailNav.className = 'thumbnail-nav';
+
+    // Add images to gallery and create thumbnails
+    folderImages.forEach((image, index) => {
+        // Create main photo item
         const photoItem = document.createElement('div');
         photoItem.className = 'photo-item';
         photoItem.innerHTML = `
@@ -232,6 +236,33 @@ <h1>A MAGNO</h1>
             </div>
         `;
         photoGrid.appendChild(photoItem);
+
+        // Create thumbnail
+        const thumbnail = document.createElement('div');
+        thumbnail.className = 'thumbnail';
+        thumbnail.innerHTML = `<img src="/photos${image.path}" loading="lazy">`;
+        thumbnail.onclick = () => {
+            const offset = index * (window.innerWidth - 200);
+            galleryView.scrollTo({
+                left: offset,
+                behavior: 'smooth'
+            });
+        };
+        thumbnailNav.appendChild(thumbnail);
+    });
+
+    // Add thumbnail navigation to gallery view
+    galleryView.appendChild(thumbnailNav);
+
+    // Update active thumbnail on scroll
+    galleryView.addEventListener('scroll', () => {
+        const scrollPosition = galleryView.scrollLeft;
+        const itemWidth = window.innerWidth - 200;
+        const activeIndex = Math.round(scrollPosition / itemWidth);
+
+        document.querySelectorAll('.thumbnail').forEach((thumb, index) => {
+            thumb.classList.toggle('active', index === activeIndex);
+        });
     });
 
     galleryView.classList.add('active');
@@ -242,8 +273,11 @@ <h1>A MAGNO</h1>
     if (event) {
         event.preventDefault();
     }
-    console.log('Hiding gallery');
     const galleryView = document.querySelector('.gallery-view');
+    const thumbnailNav = galleryView.querySelector('.thumbnail-nav');
+    if (thumbnailNav) {
+        thumbnailNav.remove();
+    }
     galleryView.classList.remove('active');
     document.body.style.overflow = '';
 }

diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -236,4 +236,37 @@ select {
     .main-content.gallery-open {
         width: 100%;
     }
+}
+
+/* New styles for thumbnail navigation */
+.thumbnail-nav {
+    position: fixed;
+    bottom: 40px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 10px;
+    padding: 15px;
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 4px;
+    z-index: 1002;
+}
+
+.thumbnail {
+    width: 60px;
+    height: 40px;
+    background: #f0f0f0;
+    cursor: pointer;
+    opacity: 0.6;
+    transition: opacity 0.2s;
+}
+
+.thumbnail img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.thumbnail.active {
+    opacity: 1;
 } 
diff --git a/index.html b/index.html
@@ -178,10 +178,14 @@ <h1>A MAGNO</h1>
 
     // Filter images for this folder
     const folderImages = imageData.images.filter(img => img.folder === folderPath);
-    console.log('Images found for folder:', folderImages);
 
-    // Add images to gallery
-    folderImages.forEach(image => {
+    // Create thumbnail navigation
+    const thumbnailNav = document.createElement('div');
+    thumbnailNav.className = 'thumbnail-nav';
+
+    // Add images to gallery and create thumbnails
+    folderImages.forEach((image, index) => {
+        // Create main photo item
         const photoItem = document.createElement('div');
         photoItem.className = 'photo-item';
         photoItem.innerHTML = `
@@ -192,6 +196,33 @@ <h1>A MAGNO</h1>
             </div>
         `;
         photoGrid.appendChild(photoItem);
+
+        // Create thumbnail
+        const thumbnail = document.createElement('div');
+        thumbnail.className = 'thumbnail';
+        thumbnail.innerHTML = `<img src="{{ site.baseurl }}${image.path}" loading="lazy">`;
+        thumbnail.onclick = () => {
+            const offset = index * (window.innerWidth - 200);
+            galleryView.scrollTo({
+                left: offset,
+                behavior: 'smooth'
+            });
+        };
+        thumbnailNav.appendChild(thumbnail);
+    });
+
+    // Add thumbnail navigation to gallery view
+    galleryView.appendChild(thumbnailNav);
+
+    // Update active thumbnail on scroll
+    galleryView.addEventListener('scroll', () => {
+        const scrollPosition = galleryView.scrollLeft;
+        const itemWidth = window.innerWidth - 200;
+        const activeIndex = Math.round(scrollPosition / itemWidth);
+
+        document.querySelectorAll('.thumbnail').forEach((thumb, index) => {
+            thumb.classList.toggle('active', index === activeIndex);
+        });
     });
 
     galleryView.classList.add('active');
@@ -202,8 +233,11 @@ <h1>A MAGNO</h1>
     if (event) {
         event.preventDefault();
     }
-    console.log('Hiding gallery');
     const galleryView = document.querySelector('.gallery-view');
+    const thumbnailNav = galleryView.querySelector('.thumbnail-nav');
+    if (thumbnailNav) {
+        thumbnailNav.remove();
+    }
     galleryView.classList.remove('active');
     document.body.style.overflow = '';
 }