gallery

1 files changed, 36 insertions, 0 deletions

diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/media.gallery.js b/animism-align/frontend/app/views/viewer/player/components.utility/media.gallery.js
new file mode 100644
index 0000000..d92f360
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/player/components.utility/media.gallery.js
@@ -0,0 +1,36 @@
+import React, { Component } from 'react'
+import { useKeenSlider } from "keen-slider/react"
+import "keen-slider/keen-slider.min.css"
+
+export const Gallery = ({ media }) => {
+  const { image_order, image_lookup, display_lookup, thumbnail_lookup } = media.settings
+
+  const [sliderRef] = useKeenSlider({
+    slidesPerView: 2,
+    mode: "free-snap",
+    spacing: 15,
+    centered: true,
+    loop: false
+  });
+  console.log(display_lookup)
+  // console.log(width)
+  return (
+    <div ref={sliderRef} className='keen-slider gallery-items'>
+      {image_order.map(id => {
+        const image = display_lookup[id]
+        console.log(image)
+        return (
+          <GalleryItem key={id} image={image} />
+        )
+      })}
+    </div>
+  )
+}
+
+const GalleryItem = ({ image }) => {
+  return (
+    <div className='keen-slider__slide gallery-item' style={{
+      backgroundImage: 'url(' + image.url + ')',
+    }} />
+  )
+}