3 files changed, 59 insertions, 1 deletions
diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/index.js b/animism-align/frontend/app/views/viewer/player/components.utility/index.js
index be38cac..c3ef614 100644
--- a/animism-align/frontend/app/views/viewer/player/components.utility/index.js
+++ b/animism-align/frontend/app/views/viewer/player/components.utility/index.js
@@ -8,7 +8,12 @@ import {
   Vitrine
 } from './media.vitrine'
 
+import {
+  Gallery
+} from './media.gallery'
+
 export {
   MediaCitation,
   Vitrine,
+  Gallery,
 }
 \ No newline at end of file
diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/vitrine.css b/animism-align/frontend/app/views/viewer/player/components.utility/media.css
index 7acf601..624e493 100644
--- a/animism-align/frontend/app/views/viewer/player/components.utility/vitrine.css
+++ b/animism-align/frontend/app/views/viewer/player/components.utility/media.css
@@ -1,3 +1,20 @@
+/* gallery */
+
+.gallery {
+}
+.keen-slider {
+}
+.gallery-container {
+  padding: 1rem;
+}
+.gallery-item {
+  height: calc(100vh - 9rem);
+  width: 50vw;
+  background-size: contain;
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+
 /* vitrine */
 
 .vitrine .heading {
@@ -63,4 +80,4 @@
 }
 .inline-element.vitrine .heading {
   padding-top: 8rem;
-}
-\ No newline at end of file
+}
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 + ')',
+    }} />
+  )
+}