imageviewer working

6 files changed, 40 insertions, 22 deletions

diff --git a/StoneIsland/www/css/vendor/imageviewer.css b/StoneIsland/www/css/vendor/imageviewer.css
index 5f7d326e..c5709bb4 100644
--- a/StoneIsland/www/css/vendor/imageviewer.css
+++ b/StoneIsland/www/css/vendor/imageviewer.css
@@ -8,7 +8,7 @@
 /***** image viewer css *****/
 #iv-container {
   position: fixed;
-  background: #0d0d0d;
+  background: #ffffff;
   width: 100%;
   height: 100%;
   top: 0;
@@ -41,7 +41,7 @@
   content: "";
   height: 4px;
   width: 32px;
-  background: #FFF;
+  background: #000;
   position: absolute;
   left: 0;
   top: 50%;
diff --git a/StoneIsland/www/js/index.js b/StoneIsland/www/js/index.js
index 164d98cc..9b54ad44 100755
--- a/StoneIsland/www/js/index.js
+++ b/StoneIsland/www/js/index.js
@@ -127,6 +127,7 @@ var app = (function(){
     if (window.deepLinkRoute) {
       app.router.go(window.deepLinkRoute)
     }
+    app.fullscreenViewer = ImageViewer()
     $("body").removeClass("loading")
   }
   
diff --git a/StoneIsland/www/js/lib/blogs/HubView.js b/StoneIsland/www/js/lib/blogs/HubView.js
index 20046fdf..c09dd3b3 100755
--- a/StoneIsland/www/js/lib/blogs/HubView.js
+++ b/StoneIsland/www/js/lib/blogs/HubView.js
@@ -74,7 +74,7 @@ var HubView = ScrollableView.extend({
         el.className = "item"
         $gallery.append(el)
       })
-      this.galleries[row.id] = new Flickity( ".gallery-" + row.id, {
+      var gallery = this.galleries[row.id] = new Flickity( ".gallery-" + row.id, {
         selector: '.item',
         cellAlign: 'center',
         autoPlay: false,
@@ -86,6 +86,10 @@ var HubView = ScrollableView.extend({
         contain: true,
         draggable: true,
       })
+      gallery.on('staticClick', function(e){
+        var url = gallery.selectedElement.style.backgroundImage.replace(/url\(\"?/,"").replace(/\"?\)/,"")
+        app.fullscreenViewer.show(url, url)
+      })
     }
     else {
       // single image
@@ -108,6 +112,10 @@ var HubView = ScrollableView.extend({
           var ytid = (url.match(/v=([-_a-zA-Z0-9]{11})/i) || url.match(/youtu.be\/([-_a-zA-Z0-9]{11})/i) || url.match(/embed\/([-_a-zA-Z0-9]{11})/i))[1].split('&')[0];
           e.style.backgroundImage = "url(https://i.ytimg.com/vi/" + ytid + "/maxresdefault.jpg"
         }
+      } else {
+        $(el).click(function(){
+          app.fullscreenViewer.show(row.image[0].uri)
+        })
       }
       $t.find(".gallery-left").remove()
       $t.find(".gallery-right").remove()
diff --git a/StoneIsland/www/js/lib/products/GalleryView.js b/StoneIsland/www/js/lib/products/GalleryView.js
index bc8ddbac..0c928739 100755
--- a/StoneIsland/www/js/lib/products/GalleryView.js
+++ b/StoneIsland/www/js/lib/products/GalleryView.js
@@ -58,7 +58,7 @@ var GalleryView = View.extend({
     })
   },
   click: function(e){
-    var currentImage = this.gallery.selectedElement.style.backgroundImage.replace("url(","").replace(")","")
+    var currentImage = this.gallery.selectedElement.style.backgroundImage.replace(/url\(\"?/,"").replace(/\"?\)/,"")
     var partz = currentImage.split("_")
     var head = partz[0]
     var size = partz[1]
@@ -67,10 +67,7 @@ var GalleryView = View.extend({
     var style = end_partz[0]
     var largest_size = this.large_styles[style]
     var hiresImage = [head, largest_size, tail].join("_")
-    console.log(currentImage, hiresImage)
-    var viewer = ImageViewer({
-    })
-    viewer.show(currentImage, hiresImage)
+    app.fullscreenViewer.show(currentImage, hiresImage)
   },
   touchstart: function(e){
   },
diff --git a/StoneIsland/www/js/vendor/imageviewer.js b/StoneIsland/www/js/vendor/imageviewer.js
index 3917e34e..9f7087da 100644
--- a/StoneIsland/www/js/vendor/imageviewer.js
+++ b/StoneIsland/www/js/vendor/imageviewer.js
@@ -689,21 +689,27 @@
             $window.off(eventSuffix);
             return null;
         },
-        load: function (image, hiResImg) {
+        load: function (image, hiResImgSrc) {
             var self = this,
                 container = this.container;
 
             container.find('.iv-snap-image,.iv-large-image').remove();
             var snapImageWrap = this.container.find('.iv-snap-image-wrap');
-            snapImageWrap.prepend('<img class="iv-snap-image" src="' + image + '" />');
-            this.imageWrap.prepend('<img class="iv-large-image" src="' + image + '" />');
 
-            if (hiResImg) {
-                this.imageWrap.append('<img class="iv-large-image" src="' + hiResImg + '" />')
-            }
+            var snapImage = new Image
+            snapImage.className = 'iv-snap-image'
+            snapImage.src = image
+
+            var largeImage = new Image
+            largeImage.className = 'iv-large-image'
+
+            var hiResImg;
+
+            snapImageWrap.prepend(snapImage);
+            this.imageWrap.prepend(largeImage);
 
-            var currentImg = this.currentImg = this.container.find('.iv-large-image');
-            this.snapImg = this.container.find('.iv-snap-image');
+            var currentImg = this.currentImg = $(largeImage);
+            this.snapImg = $(snapImage);
             self.loaded = false;
 
             //show loader
@@ -725,13 +731,19 @@
                 //hide loader
                 container.find('.iv-loader').hide();
             }
-            console.log(currentImg[0])
-            if (imageLoaded(currentImg[0])) {
-                refreshView();
+
+            var loaded = false
+            largeImage.onload = function(){
+                if (loaded) return
+                loaded = true
+                refreshView()
+            }
+            if (hiResImgSrc) {
+                largeImage.src = hiResImgSrc
             } else {
-                $(currentImg[0]).on('load', refreshView);
+                largeImage.src = image
             }
-
+            if (largeImage.complete) largeImage.onload()
         }
     }
 
diff --git a/proxy/index.js b/proxy/index.js
index 425f97f6..18d61f13 100755
--- a/proxy/index.js
+++ b/proxy/index.js
@@ -8,7 +8,7 @@ var PORT = 9090
 var cache = {}
 
 var DEBUG = false
-var USE_CACHE = false
+var USE_CACHE = true
 
 var server = http.createServer().listen(PORT, function(){
   console.log('Proxy listening on: http://lvh.me:%s', PORT)