using flickity gallery

3 files changed, 32 insertions, 26 deletions

diff --git a/StoneIsland/www/css/products.css b/StoneIsland/www/css/products.css
index 0a615c34..9ded00d1 100644
--- a/StoneIsland/www/css/products.css
+++ b/StoneIsland/www/css/products.css
@@ -21,15 +21,15 @@
   display: none;
 }
 
-#gallery,
-#gallery .slider,
-#gallery .slider .item {
+#gallery {
+  width: 100vw;
+  height: 63vw;
 }
 
-#gallery .slider .item {
-  float: left;
-  width: 10vw;
-}
-#gallery .slider .item img {
-  max-width: 10vw;
+#gallery .item {
+  width: 100vw;
+  height: 63vw;
+  background-size: contain;
+  background-position: center center;
+  background-repeat: no-repeat;
 }
diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html
index 4706fe18..06f4335f 100644
--- a/StoneIsland/www/index.html
+++ b/StoneIsland/www/index.html
@@ -18,6 +18,7 @@
   <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
   <link rel="stylesheet" type="text/css" href="css/fonts/fonts.css">
   <link rel="stylesheet" type="text/css" href="css/fonts/ionicons.css">
+  <link rel="stylesheet" type="text/css" href="css/vendor/flickity.css">
   <link rel="stylesheet" type="text/css" href="css/index.css">
   <link rel="stylesheet" type="text/css" href="css/nav.css">
   <link rel="stylesheet" type="text/css" href="css/products.css">
@@ -145,15 +146,9 @@
   <div id="product">
     <div class="scroll">
       <div id="gallery">
-        <span class="left"></span>
-        <span class="right"></span>
-        <div class="slider">
-          <script type="text/html" class="template">
-            <div class="item" data-id="{{id}}">
-              <img src="{{image}}">
-            </div>
-          </script>
-        </div>
+        <script type="text/html" class="template">
+          <div class="item" style="background-image:url({{image}})"></div>
+        </script>
       </div>
       <div class="content">
         <h2><b class="num"></b><span class="title"></h2>
@@ -347,6 +342,7 @@
 <script src="js/vendor/loader.js"></script>
 <script src="js/vendor/lodash.min.js"></script>
 <script src="js/vendor/oktween.js"></script>
+<script src="js/vendor/flickity.pkgd.js"></script>
 <script src="js/vendor/util.js"></script>
 <script src="js/vendor/view/view.js"></script>
 <script src="js/vendor/view/formview.js"></script>
diff --git a/StoneIsland/www/js/lib/products/GalleryView.js b/StoneIsland/www/js/lib/products/GalleryView.js
index 44eed9f0..a139c454 100644
--- a/StoneIsland/www/js/lib/products/GalleryView.js
+++ b/StoneIsland/www/js/lib/products/GalleryView.js
@@ -6,15 +6,13 @@ var GalleryView = View.extend({
   events: {
     "click .left": "prev",
     "click .right": "next",
-    "touchstart .gallery": "touchstart",
-    "touchmove .gallery": "touchmove",
-    "touchend .gallery": "touchend",
+//     "touchstart .gallery": "touchstart",
+//     "touchmove .gallery": "touchmove",
+//     "touchend .gallery": "touchend",
   },
   
   initialize: function(){
-    this.$prev = this.$(".prev")
-    this.$next = this.$(".next")
-    this.$slider = this.$(".slider")
+    this.$(".template").remove()
   },
   
   populate: function(code, image_ids){
@@ -31,9 +29,21 @@ var GalleryView = View.extend({
     Object.keys(valid_styles).forEach(function(style){
       var id = valid_styles[style] + "_" + style
       var t = this.template.replace(/{{image}}/, sdk.image(code, id))
-                           .replace(/{{id}}/, sdk.image(code, id))
-      this.$slider.append(t)
+      this.$el.append(t)
     }.bind(this))
+    
+    this.gallery = new Flickity( "#gallery", {
+      selector: '.item',
+      cellAlign: 'center',
+      autoPlay: false,
+      freeScroll: false,
+      wrapAround: true,
+      imagesLoaded: true,
+      prevNextButtons: false,
+      pageDots: false,
+      contain: true,
+      draggable: true,
+    })
   },
 
   prev: function(){