make thumbnails scrollable

mediacms-io · Nov 25, 2024 · 2bba9f6 · 2bba9f6
1 parent ac06d31
commit 2bba9f6
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 22 deletions.
diff --git a/frontend/src/static/js/components/media-page/MediaPage.scss b/frontend/src/static/js/components/media-page/MediaPage.scss
@@ -553,9 +553,7 @@
   max-width: 90%;
 }
 
-.slideshow-image{
-  position: relative;
-}
+
 
 .slideshow-image img {
   display: block;
@@ -612,33 +610,54 @@
   right: 10px;
 }
 
-.dots {
-  position: fixed; /* Make the dots container fixed to always be under the image */
+.thumbnail-navigation {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 20px;
+  gap: 10px;
   bottom: 10%;
   left: 50%;
   transform: translateX(-50%);
+}
+
+.thumbnail-container {
   display: flex;
   gap: 10px;
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  max-width: 80%;
+  padding: 10px 0;
+  scrollbar-width: none; /* Hide scrollbar for Firefox */
+}
+
+.thumbnail-container.center-thumbnails {
+  display: flex;
   justify-content: center;
-  z-index: 1000;
+  overflow: visible; /* No scrollbars for fewer thumbnails */
+}
+
+.thumbnail-container::-webkit-scrollbar {
+  display: none; /* Hide scrollbar for Chrome/Safari */
 }
 
 .thumbnail {
-  width: 50px;  
-  height: 50px;
-  object-fit: cover;  
+  width: 60px;
+  height: 60px;
+  object-fit: cover;
   border: 2px solid transparent;
   border-radius: 5px;
   cursor: pointer;
-  transition: all 0.3s ease-in-out;
+  transition: transform 0.3s ease;
 }
 
 .thumbnail.active {
-  border-color: rgba(255, 255, 255, 1); 
+  border-color: white;
 }
 
 .thumbnail:hover {
-  opacity: 0.8;  
+  transform: scale(1.1);
 }
 
 .viewer-container .player-container {

diff --git a/frontend/src/static/js/components/media-viewer/ImageViewer.js b/frontend/src/static/js/components/media-viewer/ImageViewer.js
@@ -18,6 +18,8 @@ export default function ImageViewer() {
   const [currentIndex, setCurrentIndex] = useState(0);
   const [isImgLoading, setIsImgLoading] = useState(true);
 
+  const thumbnailRef = React.useRef();
+
   function onImageLoad() {
     setImage(getImageUrl());
   }
@@ -91,6 +93,17 @@ export default function ImageViewer() {
     window.location.href = mediaPageUrl;
   };
 
+  const scrollThumbnails = (direction) => {
+    if (thumbnailRef.current) {
+      const scrollAmount = 10;
+      if (direction === 'left') {
+        thumbnailRef.current.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
+      } else if (direction === 'right') {
+        thumbnailRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });
+      }
+    }
+  };
+
   return !image ? null : (
     <div className="viewer-image-container">
       <Tooltip content={'load full-image'} position="center">
@@ -121,16 +134,31 @@ export default function ImageViewer() {
                 &#8250;
               </button>
             )}
-            <div className="dots">
-              {slideshowItems.map((item, index) => (
-                <img
-                  key={index}
-                  src={site.url + '/' + item.thumbnail_url} 
-                  alt={`Thumbnail ${index + 1}`}
-                  className={`thumbnail ${currentIndex === index ? 'active' : ''}`}
-                  onClick={() => handleDotClick(index)}
-                />
-              ))}
+            <div className="thumbnail-navigation">
+              {slideshowItems.length > 5 && (
+                <button className="arrow left" onClick={() => scrollThumbnails('left')} aria-label="Scroll left">
+                  &#8249;
+                </button>
+              )}
+              <div
+                className={`thumbnail-container ${slideshowItems.length <= 5 ? 'center-thumbnails' : ''}`}
+                ref={thumbnailRef}
+              >
+                {slideshowItems.map((item, index) => (
+                  <img
+                    key={index}
+                    src={site.url + '/' + item.thumbnail_url}
+                    alt={`Thumbnail ${index + 1}`}
+                    className={`thumbnail ${currentIndex === index ? 'active' : ''}`}
+                    onClick={() => handleDotClick(index)}
+                  />
+                ))}
+              </div>
+              {slideshowItems.length > 5 && (
+                <button className="arrow right" onClick={() => scrollThumbnails('right')} aria-label="Scroll right">
+                  &#8250;
+                </button>
+              )}
             </div>
           </div>
         </div>