stub in imageviewer

4 files changed, 1039 insertions, 2 deletions

diff --git a/StoneIsland/www/css/vendor/imageviewer.css b/StoneIsland/www/css/vendor/imageviewer.css
new file mode 100644
index 00000000..5f7d326e
--- /dev/null
+++ b/StoneIsland/www/css/vendor/imageviewer.css
@@ -0,0 +1,226 @@
+/*
+    ImageViewer v 1.1.0
+    Author: Sudhanshu Yadav
+    Copyright (c) 2015 to Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
+    Demo on: http://ignitersworld.com/lab/imageViewer.html
+*/
+
+/***** image viewer css *****/
+#iv-container {
+  position: fixed;
+  background: #0d0d0d;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  display: none;
+  z-index: 1000;
+}
+
+.iv-container {
+  overflow: hidden;
+}
+
+.iv-close {
+  width: 32px;
+  height: 32px;
+  position: absolute;
+  right: 20px;
+  top: 20px;
+  cursor: pointer;
+  text-align: center;
+  overflow: hidden;
+  text-shadow: 0px 0px 3px #6d6d6d;
+  -webkit-transition: all ease 200ms;
+  -moz-transition: all ease 200ms;
+  -o-transition: all ease 200ms;
+  transition: all ease 200ms;
+}
+.iv-close:after,
+.iv-close:before {
+  content: "";
+  height: 4px;
+  width: 32px;
+  background: #FFF;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  margin-top: -2px;
+}
+.iv-close:before {
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+.iv-close:after {
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+.iv-close:hover {
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+/***** snap view css *****/
+.iv-snap-view {
+  width: 150px;
+  height: 150px;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  border: 1px solid #666;
+  background: black;
+  z-index: 100;
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  -webkit-transition: all ease 400ms;
+  -moz-transition: all ease 400ms;
+  -o-transition: all ease 400ms;
+  transition: all ease 400ms;
+  opacity: 0;
+}
+
+.iv-snap-image-wrap {
+  display: inline-block;
+  position: absolute;
+  max-width: 150px;
+  max-height: 150px;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  -moz-transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  -o-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  overflow: hidden;
+}
+
+.iv-snap-image {
+  position: relative;
+}
+
+.iv-snap-handle {
+  position: absolute;
+  border: 1px solid #ccc;
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  -ms-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+  -webkit-box-shadow: 0px 0px 0px 200px rgba(0, 0, 0, 0.5);
+  -moz-box-shadow: 0px 0px 0px 200px rgba(0, 0, 0, 0.5);
+  box-shadow: 0px 0px 0px 200px rgba(0, 0, 0, 0.5);
+}
+
+/*** zoom slider ***/
+.iv-zoom-slider {
+  width: 100%;
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  border: 1px solid #666;
+  border-top: 0;
+  background: rgba(204, 204, 204, 0.1);
+  height: 15px;
+  position: absolute;
+  top: 150px;
+  left: -1px;
+}
+
+.iv-zoom-handle {
+  width: 20px;
+  height: 15px;
+  background: #ccc;
+  position: absolute;
+}
+
+/**** snap view css end *****/
+.iv-image-view {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+}
+
+.iv-image-wrap {
+  display: inline-block;
+}
+
+.iv-image-wrap:active {
+  cursor: move;
+}
+
+.iv-large-image {
+  max-width: 100%;
+  max-height: 100%;
+  position: absolute;
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  -ms-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+}
+
+/****** CSS loader by http://projects.lukehaas.me/css-loaders/ *****/
+.iv-loader {
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  z-index: 100;
+  margin-top: -16px;
+  margin-left: -16px;
+  font-size: 5px;
+  position: absolute;
+  text-indent: -9999em;
+  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-left: 1.1em solid #ffffff;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation: load8 1.1s infinite linear;
+  animation: load8 1.1s infinite linear;
+}
+.iv-loader:after {
+  width: 10em;
+  height: 10em;
+  border-radius: 50%;
+}
+@-webkit-keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+
+@media screen and (max-width: 767px) {
+  .iv-snap-view {
+    z-index: -1;
+    visibility: hidden;
+  }
+}
diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html
index fb5a3c0a..943b2b05 100755
--- a/StoneIsland/www/index.html
+++ b/StoneIsland/www/index.html
@@ -20,6 +20,7 @@
   <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/vendor/imageviewer.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/account.css">
@@ -1087,6 +1088,7 @@
 <script src="js/vendor/lodash.min.js"></script>
 <script src="js/vendor/moment.js"></script>
 <script src="js/vendor/oktween.js"></script>
+<script src="js/vendor/imageviewer.js"></script>
 <script src="js/vendor/prefixfree.js"></script>
 <script src="js/vendor/promise.js"></script>
 <script src="js/vendor/flickity.pkgd.js"></script>
diff --git a/StoneIsland/www/js/lib/products/GalleryView.js b/StoneIsland/www/js/lib/products/GalleryView.js
index 1428aca9..bc8ddbac 100755
--- a/StoneIsland/www/js/lib/products/GalleryView.js
+++ b/StoneIsland/www/js/lib/products/GalleryView.js
@@ -9,6 +9,7 @@ var GalleryView = View.extend({
 //     "touchstart .gallery": "touchstart",
 //     "touchmove .gallery": "touchmove",
 //     "touchend .gallery": "touchend",
+    "click": "click",
   },
   
   initialize: function(){
@@ -22,21 +23,27 @@ var GalleryView = View.extend({
   
   populate: function(code, image_ids){
     var valid_styles = {}
+    var large_styles = this.large_styles = {}
     image_ids.forEach(function(id){
       if (id.indexOf("_") == -1) return
       var partz = id.split("_")
       var size = parseInt(partz[0]), style = partz[1]
+
+      if (! large_styles[style] || large_styles[style] < size) {
+        large_styles[style] = size
+      }
       if (size > 13) return;
       if (! valid_styles[style] || valid_styles[style] < size) {
         valid_styles[style] = size
       }
     })
+
     Object.keys(valid_styles).sort(sort_image_styles).forEach(function(style){
       var id = valid_styles[style] + "_" + style
       var t = this.template.replace(/{{image}}/, sdk.image(code, id))
       this.$el.append(t)
     }.bind(this))
-    
+
     this.gallery = new Flickity( "#gallery", {
       selector: '.item',
       cellAlign: 'center',
@@ -50,7 +57,21 @@ var GalleryView = View.extend({
       draggable: true,
     })
   },
-
+  click: function(e){
+    var currentImage = this.gallery.selectedElement.style.backgroundImage.replace("url(","").replace(")","")
+    var partz = currentImage.split("_")
+    var head = partz[0]
+    var size = partz[1]
+    var tail = partz[2]
+    var end_partz = tail.split(/\./)
+    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)
+  },
   touchstart: function(e){
   },
   touchmove: function(e){
diff --git a/StoneIsland/www/js/vendor/imageviewer.js b/StoneIsland/www/js/vendor/imageviewer.js
new file mode 100644
index 00000000..3917e34e
--- /dev/null
+++ b/StoneIsland/www/js/vendor/imageviewer.js
@@ -0,0 +1,788 @@
+/*
+    ImageViewer v 1.1.3
+    Author: Sudhanshu Yadav
+    Copyright (c) 2015-2016 to Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
+    Demo on: http://ignitersworld.com/lab/imageViewer.html
+*/
+
+/*** picture view plugin ****/
+(function ($, window, document, undefined) {
+    "use strict";
+
+    //an empty function
+    var noop = function () {};
+
+    var $body = $('body'),
+        $window = $(window),
+        $document = $(document);
+
+
+    //constants
+    var ZOOM_CONSTANT = 15; //increase or decrease value for zoom on mouse wheel
+    var MOUSE_WHEEL_COUNT = 5; //A mouse delta after which it should stop preventing default behaviour of mouse wheel
+
+    //ease out method
+    /*
+        t : current time,
+        b : intial value,
+        c : changed value,
+        d : duration
+    */
+    function easeOutQuart(t, b, c, d) {
+        t /= d;
+        t--;
+        return -c * (t * t * t * t - 1) + b;
+    };
+
+
+    // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+    // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
+
+    // requestAnimationFrame polyfill by Erik Möller
+    // fixes from Paul Irish and Tino Zijdel
+
+    (function () {
+        var lastTime = 0;
+        var vendors = ['ms', 'moz', 'webkit', 'o'];
+        for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+            window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
+            window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
+        }
+
+        if (!window.requestAnimationFrame)
+            window.requestAnimationFrame = function (callback, element) {
+                var currTime = new Date().getTime();
+                var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+                var id = window.setTimeout(function () {
+                        callback(currTime + timeToCall);
+                    },
+                    timeToCall);
+                lastTime = currTime + timeToCall;
+                return id;
+            };
+
+        if (!window.cancelAnimationFrame)
+            window.cancelAnimationFrame = function (id) {
+                clearTimeout(id);
+            };
+    }());
+
+    //function to check if image is loaded
+    function imageLoaded(img) {
+        return img.complete && (typeof img.naturalWidth === 'undefined' || img.naturalWidth !== 0);
+    }
+
+    var imageViewHtml = '<div class="iv-loader"></div> <div class="iv-snap-view">' + '<div class="iv-snap-image-wrap">' + '<div class="iv-snap-handle"></div>' + '</div>' + '<div class="iv-zoom-slider"><div class="iv-zoom-handle"></div></div></div>' + '<div class="iv-image-view" ><div class="iv-image-wrap" ></div></div>';
+
+    //add a full screen view
+    $(function () {
+        if(!$body.length) $body = $('body');
+        $body.append('<div id="iv-container">' + imageViewHtml + '<div class="iv-close"></div><div>');
+    });
+
+    function Slider(container, options) {
+        this.container = container;
+        this.onStart = options.onStart || noop;
+        this.onMove = options.onMove || noop;
+        this.onEnd = options.onEnd || noop;
+        this.sliderId = options.sliderId || 'slider' + Math.ceil(Math.random() * 1000000);
+    }
+
+    Slider.prototype.init = function () {
+        var self = this,
+            container = this.container,
+            eventSuffix = '.' + this.sliderId;
+
+        //assign event on snap image wrap
+        this.container.on('touchstart' + eventSuffix + ' mousedown' + eventSuffix, function (estart) {
+          estart.preventDefault();
+            var touchMove = (estart.type == "touchstart" ? "touchmove" : "mousemove") + eventSuffix,
+                touchEnd = (estart.type == "touchstart" ? "touchend" : "mouseup") + eventSuffix,
+                eOrginal = estart.originalEvent,
+                sx = eOrginal.clientX || eOrginal.touches[0].clientX,
+                sy = eOrginal.clientY || eOrginal.touches[0].clientY;
+
+            var start = self.onStart(estart, {
+                x: sx,
+                y: sy
+            });
+
+            if (start === false) return;
+
+            var moveListener = function (emove) {
+                emove.preventDefault();
+
+                eOrginal = emove.originalEvent;
+
+                //get the cordinates
+                var mx = eOrginal.clientX || eOrginal.touches[0].clientX,
+                    my = eOrginal.clientY || eOrginal.touches[0].clientY;
+
+                self.onMove(emove, {
+                    dx: mx - sx,
+                    dy: my - sy,
+                    mx: mx,
+                    my: my
+                });
+
+            };
+
+            var endListener = function () {
+                $document.off(touchMove, moveListener);
+                $document.off(touchEnd, endListener);
+                self.onEnd();
+            };
+
+            $document.on(touchMove, moveListener);
+            $document.on(touchEnd, endListener);
+        });
+
+        return this;
+    }
+
+
+    function ImageViewer(container, options) {
+        var self = this;
+
+        if (container.is('#iv-container')) {
+            self._fullPage = true;
+        }
+
+        self.container = container;
+        options = self.options = $.extend({}, ImageViewer.defaults, options);
+
+        self.zoomValue = 100;
+
+        if (!container.find('.snap-view').length) {
+            container.prepend(imageViewHtml);
+        }
+
+        container.addClass('iv-container');
+
+        if (container.css('position') == 'static') container.css('position', 'relative');
+
+        self.snapView = container.find('.iv-snap-view');
+        self.snapImageWrap = container.find('.iv-snap-image-wrap');
+        self.imageWrap = container.find('.iv-image-wrap');
+        self.snapHandle = container.find('.iv-snap-handle');
+        self.zoomHandle = container.find('.iv-zoom-handle');
+        self._viewerId = 'iv' + Math.floor(Math.random() * 1000000);
+    }
+
+
+    ImageViewer.prototype = {
+        constructor: ImageViewer,
+        _init: function () {
+            var viewer = this,
+                options = viewer.options,
+                zooming = false, // tell weather we are zooming trough touch
+                container = this.container;
+
+            var eventSuffix = '.' + viewer._viewerId;
+
+            //cache dom refrence
+            var snapHandle = this.snapHandle;
+            var snapImgWrap = this.snapImageWrap;
+            var imageWrap = this.imageWrap;
+
+            var snapSlider = new Slider(snapImgWrap, {
+                sliderId: viewer._viewerId,
+                onStart: function () {
+
+                    if (!viewer.loaded) return false;
+
+                    var handleStyle = snapHandle[0].style;
+
+                    this.curHandleTop = parseFloat(handleStyle.top);
+                    this.curHandleLeft = parseFloat(handleStyle.left);
+                    this.handleWidth = parseFloat(handleStyle.width);
+                    this.handleHeight = parseFloat(handleStyle.height);
+                    this.width = snapImgWrap.width();
+                    this.height = snapImgWrap.height();
+
+                    //stop momentum on image
+                    clearInterval(imageSlider.slideMomentumCheck);
+                    cancelAnimationFrame(imageSlider.sliderMomentumFrame);
+                },
+                onMove: function (e, position) {
+                    var xPerc = this.curHandleLeft + position.dx * 100 / this.width,
+                        yPerc = this.curHandleTop + position.dy * 100 / this.height;
+
+                    xPerc = Math.max(0, xPerc);
+                    xPerc = Math.min(100 - this.handleWidth, xPerc);
+
+                    yPerc = Math.max(0, yPerc);
+                    yPerc = Math.min(100 - this.handleHeight, yPerc);
+
+
+                    var containerDim = viewer.containerDim,
+                        imgWidth = viewer.imageDim.w * (viewer.zoomValue / 100),
+                        imgHeight = viewer.imageDim.h * (viewer.zoomValue / 100),
+                        imgLeft = imgWidth < containerDim.w ? (containerDim.w - imgWidth) / 2 : -imgWidth * xPerc / 100,
+                        imgTop = imgHeight < containerDim.h ? (containerDim.h - imgHeight) / 2 : -imgHeight * yPerc / 100;
+
+                    snapHandle.css({
+                        top: yPerc + '%',
+                        left: xPerc + '%'
+                    })
+
+                    viewer.currentImg.css({
+                        left: imgLeft,
+                        top: imgTop
+                    })
+                }
+            }).init();
+
+
+            /*Add slide interaction to image*/
+            var imageSlider = viewer._imageSlider = new Slider(imageWrap, {
+                sliderId: viewer._viewerId,
+                onStart: function (e, position) {
+                    if (!viewer.loaded) return false;
+                    if (zooming) return;
+                    var self = this;
+                    snapSlider.onStart();
+                    self.imgWidth = viewer.imageDim.w * viewer.zoomValue / 100;
+                    self.imgHeight = viewer.imageDim.h * viewer.zoomValue / 100;
+
+                    self.positions = [position, position];
+
+                    self.startPosition = position;
+
+                    //clear all animation frame and interval
+                    viewer._clearFrames();
+
+                    self.slideMomentumCheck = setInterval(function () {
+                        if (!self.currentPos) return;
+                        self.positions.shift();
+                        self.positions.push({
+                            x: self.currentPos.mx,
+                            y: self.currentPos.my
+                        })
+                    }, 50);
+                },
+                onMove: function (e, position) {
+                    if (zooming) return;
+                    this.currentPos = position;
+
+                    snapSlider.onMove(e, {
+                        dx: -position.dx * snapSlider.width / this.imgWidth,
+                        dy: -position.dy * snapSlider.height / this.imgHeight
+                    });
+                },
+                onEnd: function () {
+                    if (zooming) return;
+                    var self = this;
+
+                    var xDiff = this.positions[1].x - this.positions[0].x,
+                        yDiff = this.positions[1].y - this.positions[0].y;
+
+                    function momentum() {
+                        if (step <= 60) {
+                            self.sliderMomentumFrame = requestAnimationFrame(momentum);
+                        }
+
+                        positionX = positionX + easeOutQuart(step, xDiff / 3, -xDiff / 3, 60);
+                        positionY = positionY + easeOutQuart(step, yDiff / 3, -yDiff / 3, 60)
+
+
+                        snapSlider.onMove(null, {
+                            dx: -((positionX) * snapSlider.width / self.imgWidth),
+                            dy: -((positionY) * snapSlider.height / self.imgHeight)
+                        });
+                        step++;
+                    }
+
+                    if (Math.abs(xDiff) > 30 || Math.abs(yDiff) > 30) {
+                        var step = 1,
+                            positionX = self.currentPos.dx,
+                            positionY = self.currentPos.dy;
+
+                        momentum();
+                    }
+                }
+            }).init();
+
+
+            /*Add zoom interation in mouse wheel*/
+            var changedDelta = 0;
+            imageWrap.on("mousewheel" + eventSuffix + " DOMMouseScroll" + eventSuffix, function (e) {
+                if(!options.zoomOnMouseWheel) return;
+
+                if (!viewer.loaded) return;
+
+
+                //clear all animation frame and interval
+                viewer._clearFrames();
+
+                // cross-browser wheel delta
+                var delta = Math.max(-1, Math.min(1, (e.originalEvent.wheelDelta || -e.originalEvent.detail))),
+                    zoomValue = viewer.zoomValue * (100 + delta * ZOOM_CONSTANT) / 100;
+
+                if(!(zoomValue >= 100 && zoomValue <= options.maxZoom)){
+                    changedDelta += Math.abs(delta);
+                }
+                else{
+                    changedDelta = 0;
+                }
+
+                if(changedDelta > MOUSE_WHEEL_COUNT) return;
+
+                e.preventDefault();
+
+                var contOffset = container.offset(),
+                    x = (e.pageX || e.originalEvent.pageX) - contOffset.left,
+                    y = (e.pageY || e.originalEvent.pageY) - contOffset.top;
+
+
+
+                viewer.zoom(zoomValue, {
+                    x: x,
+                    y: y
+                });
+
+                //show the snap viewer
+                showSnapView();
+            });
+
+
+            //apply pinch and zoom feature
+            imageWrap.on('touchstart' + eventSuffix, function (estart) {
+                if (!viewer.loaded) return;
+                var touch0 = estart.originalEvent.touches[0],
+                    touch1 = estart.originalEvent.touches[1];
+
+                if (!(touch0 && touch1)) {
+                    return;
+                }
+
+
+                zooming = true;
+
+                var contOffset = container.offset();
+
+                var startdist = Math.sqrt(Math.pow(touch1.pageX - touch0.pageX, 2) + Math.pow(touch1.pageY - touch0.pageY, 2)),
+                    startZoom = viewer.zoomValue,
+                    center = {
+                        x: ((touch1.pageX + touch0.pageX) / 2) - contOffset.left,
+                        y: ((touch1.pageY + touch0.pageY) / 2) - contOffset.top
+                    }
+
+                var moveListener = function (emove) {
+                    emove.preventDefault();
+
+                    var touch0 = emove.originalEvent.touches[0],
+                        touch1 = emove.originalEvent.touches[1],
+                        newDist = Math.sqrt(Math.pow(touch1.pageX - touch0.pageX, 2) + Math.pow(touch1.pageY - touch0.pageY, 2)),
+                        zoomValue = startZoom + (newDist - startdist) / 2;
+
+                    viewer.zoom(zoomValue, center);
+                };
+
+                var endListener = function () {
+                    $document.off('touchmove', moveListener);
+                    $document.off('touchend', endListener);
+                    zooming = false;
+                };
+
+                $document.on('touchmove', moveListener);
+                $document.on('touchend', endListener);
+
+            });
+
+
+            //handle double tap for zoom in and zoom out
+            var touchtime = 0,
+                point;
+            imageWrap.on('click' + eventSuffix, function (e) {
+                if (touchtime == 0) {
+                    touchtime = Date.now();
+                    point = {
+                        x: e.pageX,
+                        y: e.pageY
+                    };
+                } else {
+                    if ((Date.now() - touchtime) < 500 && Math.abs(e.pageX - point.x) < 50 && Math.abs(e.pageY - point.y) < 50) {
+                        if (viewer.zoomValue == options.zoomValue) {
+                            viewer.zoom(200)
+                        } else {
+                            viewer.resetZoom()
+                        }
+                        touchtime = 0;
+                    } else {
+                        touchtime = 0;
+                    }
+                }
+            });
+
+            //zoom in zoom out using zoom handle
+            var slider = viewer.snapView.find('.iv-zoom-slider');
+            var zoomSlider = new Slider(slider, {
+                sliderId: viewer._viewerId,
+                onStart: function (eStart) {
+
+                    if (!viewer.loaded) return false;
+
+                    this.leftOffset = slider.offset().left;
+                    this.handleWidth = viewer.zoomHandle.width();
+                    this.onMove(eStart);
+
+                },
+                onMove: function (e, position) {
+                    var newLeft = (e.pageX || e.originalEvent.touches[0].pageX) - this.leftOffset - this.handleWidth / 2;
+
+                    newLeft = Math.max(0, newLeft);
+                    newLeft = Math.min(viewer._zoomSliderLength, newLeft);
+
+                    var zoomValue = 100 + (options.maxZoom - 100) * newLeft / viewer._zoomSliderLength;
+
+                    viewer.zoom(zoomValue);
+                }
+            }).init();
+
+
+            //display snapView on interaction
+            var snapViewTimeout, snapViewVisible;
+
+            function showSnapView(noTimeout) {
+                if(!options.snapView) return;
+
+                if (snapViewVisible || viewer.zoomValue <= 100 || !viewer.loaded) return;
+                clearTimeout(snapViewTimeout);
+                snapViewVisible = true;
+                viewer.snapView.css('opacity', 1);
+                if (!noTimeout) {
+                    snapViewTimeout = setTimeout(function () {
+                        viewer.snapView.css('opacity', 0);
+                        snapViewVisible = false;
+                    }, 4000);
+                }
+            }
+
+            imageWrap.on('touchmove' + eventSuffix + ' mousemove' + eventSuffix, function () {
+                showSnapView();
+            });
+
+            var snapEventsCallback = {};
+            snapEventsCallback['mouseenter' + eventSuffix + ' touchstart' + eventSuffix] = function () {
+                snapViewVisible = false;
+                showSnapView(true);
+            };
+
+            snapEventsCallback['mouseleave' + eventSuffix + ' touchend' + eventSuffix] = function () {
+                snapViewVisible = false;
+                showSnapView();
+            };
+
+            viewer.snapView.on(snapEventsCallback);
+
+
+            //calculate elments size on window resize
+            if (options.refreshOnResize) $window.on('resize' + eventSuffix, function () {
+                viewer.refresh()
+            });
+
+            if (viewer._fullPage) {
+                //prevent scrolling the backside if container if fixed positioned
+                container.on('touchmove' + eventSuffix + ' mousewheel' + eventSuffix + ' DOMMouseScroll' + eventSuffix, function (e) {
+                    e.preventDefault();
+                });
+
+                //assign event on close button
+                container.find('.iv-close').on('click' + eventSuffix, function () {
+                    viewer.hide();
+                });
+            }
+        },
+
+        //method to zoom images
+        zoom: function (perc, point) {
+            perc = Math.round(Math.max(100, perc));
+            perc = Math.min(this.options.maxZoom, perc);
+
+            point = point || {
+                x: this.containerDim.w / 2,
+                y: this.containerDim.h / 2
+            };
+
+            var self = this,
+                maxZoom = this.options.maxZoom,
+                curPerc = this.zoomValue,
+                curImg = this.currentImg,
+                containerDim = this.containerDim,
+                curLeft = parseFloat(curImg.css('left')),
+                curTop = parseFloat(curImg.css('top'));
+
+            self._clearFrames();
+
+            var step = 0;
+            
+            //calculate base top,left,bottom,right
+            var containerDim = self.containerDim,
+                imageDim = self.imageDim;
+            var baseLeft = (containerDim.w - imageDim.w) / 2,
+                baseTop = (containerDim.h - imageDim.h) / 2,
+                baseRight = containerDim.w - baseLeft,
+                baseBottom = containerDim.h - baseTop;
+
+            function zoom() {
+                step++;
+
+                if (step < 20) {
+                    self._zoomFrame = requestAnimationFrame(zoom);
+                }
+
+                var tickZoom = easeOutQuart(step, curPerc, perc - curPerc, 20);
+
+
+                var ratio = tickZoom / curPerc,
+                    imgWidth = self.imageDim.w * tickZoom / 100,
+                    imgHeight = self.imageDim.h * tickZoom / 100,
+                    newLeft = -((point.x - curLeft) * ratio - point.x),
+                    newTop = -((point.y - curTop) * ratio - point.y);
+                
+                //fix for left and top
+                newLeft = Math.min(newLeft, baseLeft);
+                newTop = Math.min(newTop, baseTop);
+                
+                //fix for right and bottom
+                if((newLeft + imgWidth) < baseRight){
+                    newLeft = baseRight - imgWidth; //newLeft - (newLeft + imgWidth - baseRight)
+                }
+                
+                if((newTop + imgHeight) < baseBottom){            
+                    newTop =  baseBottom - imgHeight; //newTop + (newTop + imgHeight - baseBottom)
+                }
+                
+
+                curImg.css({
+                    height: imgHeight + 'px',
+                    width: imgWidth + 'px',
+                    left: newLeft + 'px',
+                    top: newTop + 'px'
+                });
+
+                self.zoomValue = tickZoom;
+
+                self._resizeHandle(imgWidth, imgHeight, newLeft, newTop);
+
+                //update zoom handle position
+                self.zoomHandle.css('left', ((tickZoom - 100) * self._zoomSliderLength) / (maxZoom - 100) + 'px');
+            }
+
+            zoom();
+        },
+        _clearFrames: function () {
+            clearInterval(this._imageSlider.slideMomentumCheck);
+            cancelAnimationFrame(this._imageSlider.sliderMomentumFrame);
+            cancelAnimationFrame(this._zoomFrame)
+        },
+        resetZoom: function () {
+            this.zoom(this.options.zoomValue);
+        },
+        //calculate dimensions of image, container and reset the image
+        _calculateDimensions: function () {
+            //calculate content width of image and snap image
+            var self = this,
+                curImg = self.currentImg,
+                container = self.container,
+                snapView = self.snapView,
+                imageWidth = curImg.width(),
+                imageHeight = curImg.height(),
+                contWidth = container.width(),
+                contHeight = container.height(),
+                snapViewWidth = snapView.innerWidth(),
+                snapViewHeight = snapView.innerHeight();
+
+            //set the container dimension
+            self.containerDim = {
+                w: contWidth,
+                h: contHeight
+            }
+
+            //set the image dimension
+            var imgWidth, imgHeight, ratio = imageWidth / imageHeight;
+
+            imgWidth = (imageWidth > imageHeight && contHeight >= contWidth) || ratio * contHeight > contWidth ? contWidth : ratio * contHeight;
+
+            imgHeight = imgWidth / ratio;
+
+            self.imageDim = {
+                w: imgWidth,
+                h: imgHeight
+            }
+
+            //reset image position and zoom
+            curImg.css({
+                width: imgWidth + 'px',
+                height: imgHeight + 'px',
+                left: (contWidth - imgWidth) / 2 + 'px',
+                top: (contHeight - imgHeight) / 2 + 'px',
+                'max-width': 'none',
+                'max-height': 'none'
+            });
+
+            //set the snap Image dimension
+            var snapWidth = imgWidth > imgHeight ? snapViewWidth : imgWidth * snapViewHeight / imgHeight,
+                snapHeight = imgHeight > imgWidth ? snapViewHeight : imgHeight * snapViewWidth / imgWidth;
+
+            self.snapImageDim = {
+                w: snapWidth,
+                h: snapHeight
+            }
+
+            self.snapImg.css({
+                width: snapWidth,
+                height: snapHeight
+            });
+
+            //calculate zoom slider area
+            self._zoomSliderLength = snapViewWidth - self.zoomHandle.outerWidth();
+
+        },
+        refresh: function () {
+            if (!this.loaded) return;
+            this._calculateDimensions();
+            this.resetZoom();
+        },
+        _resizeHandle: function (imgWidth, imgHeight, imgLeft, imgTop) {
+            var curImg = this.currentImg,
+                imageWidth = imgWidth || this.imageDim.w * this.zoomValue / 100,
+                imageHeight = imgHeight || this.imageDim.h * this.zoomValue / 100,
+                left = Math.max(-(imgLeft || parseFloat(curImg.css('left'))) * 100 / imageWidth, 0),
+                top = Math.max(-(imgTop || parseFloat(curImg.css('top'))) * 100 / imageHeight, 0),
+                handleWidth = Math.min(this.containerDim.w * 100 / imageWidth, 100),
+                handleHeight = Math.min(this.containerDim.h * 100 / imageHeight, 100);
+
+
+            this.snapHandle.css({
+                top: top + '%',
+                left: left + '%',
+                width: handleWidth + '%',
+                height: handleHeight + '%'
+            });
+        },
+        show: function (image, hiResImg) {
+            if (this._fullPage) {
+                this.container.show();
+                if (image) this.load(image, hiResImg);
+            }
+        },
+        hide: function () {
+            if (this._fullPage) {
+                this.container.hide();
+            }
+        },
+        options: function (key, value) {
+            if (!value) return this.options[key];
+
+            this.options[key] = value;
+        },
+        destroy: function (key, value) {
+            var eventSuffix = '.' + this._viewerId;
+            if (this._fullPage) {
+                container.off(eventSuffix);
+                container.find('[class^="iv"]').off(eventSuffix);
+            } else {
+                this.container.remove('[class^="iv"]');
+            }
+            $window.off(eventSuffix);
+            return null;
+        },
+        load: function (image, hiResImg) {
+            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 currentImg = this.currentImg = this.container.find('.iv-large-image');
+            this.snapImg = this.container.find('.iv-snap-image');
+            self.loaded = false;
+
+            //show loader
+            container.find('.iv-loader').show();
+            currentImg.hide();
+            self.snapImg.hide();
+
+            //refresh the view
+            function refreshView() {
+                self.loaded = true;
+                self.zoomValue = 100;
+
+                //reset zoom of images
+                currentImg.show();
+                self.snapImg.show();
+                self.refresh();
+                self.resetZoom();
+
+                //hide loader
+                container.find('.iv-loader').hide();
+            }
+            console.log(currentImg[0])
+            if (imageLoaded(currentImg[0])) {
+                refreshView();
+            } else {
+                $(currentImg[0]).on('load', refreshView);
+            }
+
+        }
+    }
+
+    ImageViewer.defaults = {
+        zoomValue: 100,
+        snapView: true,
+        maxZoom: 500,
+        refreshOnResize: true,
+        zoomOnMouseWheel : true
+    }
+
+    window.ImageViewer = function (container, options) {
+        var imgElm, imgSrc, hiResImg;
+        if (!(container && (typeof container == "string" || container instanceof Element || container[0] instanceof Element))) {
+            options = container;
+            container = $('#iv-container');
+        }
+
+        container = $(container);
+
+        if (container.is('img')) {
+            imgElm = container;
+            imgSrc = imgElm[0].src;
+            hiResImg = imgElm.attr('high-res-src') || imgElm.attr('data-high-res-src');
+            container = imgElm.wrap('<div class="iv-container" style="display:inline-block; overflow:hidden"></div>').parent();
+            imgElm.css({
+                opacity: 0,
+                position: 'relative',
+                zIndex: -1
+            });
+        } else {
+            imgSrc = container.attr('src') || container.attr('data-src');
+            hiResImg = container.attr('high-res-src') || container.attr('data-high-res-src');
+        }
+
+
+        var viewer = new ImageViewer(container, options);
+        viewer._init();
+
+        if (imgSrc) viewer.load(imgSrc, hiResImg);
+
+        return viewer;
+    };
+
+
+    $.fn.ImageViewer = function (options) {
+        return this.each(function () {
+            var $this = $(this);
+            var viewer = window.ImageViewer($this, options);
+            $this.data('ImageViewer', viewer);
+        });
+    }
+
+}((window.jQuery), window, document));
\ No newline at end of file