From 4deaf036fd2351ca400a74abf19c2f805c5135b7 Mon Sep 17 00:00:00 2001
From: Martin Quarda <martin@quarda.cz>
Date: Wed, 8 May 2024 14:10:01 +0200
Subject: [PATCH] new gallery

---
 frontend/package.json          |  1 +
 frontend/src/scripts/index.js  | 11 +++++++++--
 frontend/src/styles/index.scss |  1 +
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 7c1da58..716c5ef 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -65,6 +65,7 @@
     "react": "^16.8.0",
     "react-data-table-component": "^7.6.2",
     "react-dom": "^16.8.0",
+    "react-image-gallery": "^1.3.0",
     "react-images": "1.0.0",
     "react-photo-gallery": "^8.0.0",
     "sass": "^1.70.0"
diff --git a/frontend/src/scripts/index.js b/frontend/src/scripts/index.js
index 6155ba7..cfb4d04 100644
--- a/frontend/src/scripts/index.js
+++ b/frontend/src/scripts/index.js
@@ -5,6 +5,7 @@ import { render } from "react-dom";
 
 import Gallery from "react-photo-gallery";
 import Carousel, { Modal, ModalGateway } from "react-images";
+import ImageGallery from "react-image-gallery";
 
 
 const addr_prefix = "" //"http://localhost:8000"
@@ -77,7 +78,7 @@ class Main extends Component {
                 height: photo.original_height,
             })
             photos_carousel.push({
-                source: photo.original
+                original: photo.original
             })
         };
         return (
@@ -85,7 +86,13 @@ class Main extends Component {
     <ModalGateway>
         {this.state.photoIsOpen &&
         <Modal onClose={this.togglePhoto}>
-            <Carousel views={photos_carousel} currentIndex={this.state.currentImage} />
+            <ImageGallery
+                items={photos_carousel}
+                lazyLoad={true}
+                showPlayButton={false}
+                startIndex={this.state.currentImage}
+                showThumbnails={false}
+            />
         </Modal>
         }
     </ModalGateway>
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index 98e5576..0da5067 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -1,4 +1,5 @@
 @import "../../node_modules/bootstrap/scss/bootstrap";
+@import "~react-image-gallery/styles/scss/image-gallery.scss";
 
 body {
   background: url("/public/bg.jpg") repeat-x, rgb(239, 176, 13);