new gallery

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"

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>

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);