diff --git a/demo/js/lg-zoom.js b/demo/js/lg-zoom.js
index f007c27..369b044 100644
--- a/demo/js/lg-zoom.js
+++ b/demo/js/lg-zoom.js
@@ -1,5 +1,5 @@
/**!
- * lg-zoom.js | 1.0.0 | October 5th 2016
+ * lg-zoom.js | 1.0.1 | December 22nd 2016
* http://sachinchoolur.github.io/lg-zoom.js
* Copyright (c) 2016 Sachin N;
* @license GPLv3
@@ -33,11 +33,22 @@
return target;
};
+ var getUseLeft = function getUseLeft() {
+ var useLeft = false;
+ var isChrome = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);
+ if (isChrome && parseInt(isChrome[2], 10) < 54) {
+ useLeft = true;
+ }
+
+ return useLeft;
+ };
+
var zoomDefaults = {
scale: 1,
zoom: true,
actualSize: true,
- enableZoomAfter: 300
+ enableZoomAfter: 300,
+ useLeftForZoom: getUseLeft()
};
var Zoom = function Zoom(element) {
@@ -70,6 +81,12 @@
zoomIcons += '';
}
+ if (_this.core.s.useLeftForZoom) {
+ utils.addClass(_this.core.outer, 'lg-use-left-for-zoom');
+ } else {
+ utils.addClass(_this.core.outer, 'lg-use-transition-for-zoom');
+ }
+
this.core.outer.querySelector('.lg-toolbar').insertAdjacentHTML('beforeend', zoomIcons);
// Add zoomable class
@@ -120,8 +137,13 @@
utils.setVendor(image, 'Transform', 'scale3d(' + scaleVal + ', ' + scaleVal + ', 1)');
image.setAttribute('data-scale', scaleVal);
- image.parentElement.style.left = -x + 'px';
- image.parentElement.style.top = -y + 'px';
+ if (_this.core.s.useLeftForZoom) {
+ image.parentElement.style.left = -x + 'px';
+ image.parentElement.style.top = -y + 'px';
+ } else {
+ utils.setVendor(image.parentElement, 'Transform', 'translate3d(-' + x + 'px, -' + y + 'px, 0)');
+ }
+
image.parentElement.setAttribute('data-x', x);
image.parentElement.setAttribute('data-y', y);
};
@@ -340,8 +362,13 @@
}
if (Math.abs(endCoords.x - startCoords.x) > 15 || Math.abs(endCoords.y - startCoords.y) > 15) {
- _el.style.left = distanceX + 'px';
- _el.style.top = distanceY + 'px';
+
+ if (_this.core.s.useLeftForZoom) {
+ _el.style.left = distanceX + 'px';
+ _el.style.top = distanceY + 'px';
+ } else {
+ utils.setVendor(_el, 'Transform', 'translate3d(' + distanceX + 'px, ' + distanceY + 'px, 0)');
+ }
}
}
});
@@ -435,8 +462,12 @@
distanceX = -Math.abs(_el.getAttribute('data-x'));
}
- _el.style.left = distanceX + 'px';
- _el.style.top = distanceY + 'px';
+ if (_this.core.s.useLeftForZoom) {
+ _el.style.left = distanceX + 'px';
+ _el.style.top = distanceY + 'px';
+ } else {
+ utils.setVendor(_el, 'Transform', 'translate3d(' + distanceX + 'px, ' + distanceY + 'px, 0)');
+ }
}
});
@@ -504,8 +535,12 @@
distanceX = -Math.abs(_el.getAttribute('data-x'));
}
- _el.style.left = distanceX + 'px';
- _el.style.top = distanceY + 'px';
+ if (_this.core.s.useLeftForZoom) {
+ _el.style.left = distanceX + 'px';
+ _el.style.top = distanceY + 'px';
+ } else {
+ utils.setVendor(_el, 'Transform', 'translate3d(' + distanceX + 'px, ' + distanceY + 'px, 0)');
+ }
}
};
diff --git a/demo/js/lg-zoom.min.js b/demo/js/lg-zoom.min.js
index 6138664..004a9e7 100644
--- a/demo/js/lg-zoom.min.js
+++ b/demo/js/lg-zoom.min.js
@@ -1,7 +1,7 @@
/**!
- * lg-zoom.js | 1.0.0 | October 5th 2016
+ * lg-zoom.js | 1.0.1 | December 22nd 2016
* http://sachinchoolur.github.io/lg-zoom.js
* Copyright (c) 2016 Sachin N;
* @license GPLv3
*/
-!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.LgZoom=e()}}(function(){var e,t,o;return function e(t,o,r){function i(a,s){if(!o[a]){if(!t[a]){var n="function"==typeof require&&require;if(!s&&n)return n(a,!0);if(l)return l(a,!0);var c=new Error("Cannot find module '"+a+"'");throw c.code="MODULE_NOT_FOUND",c}var u=o[a]={exports:{}};t[a][0].call(u.exports,function(e){var o=t[a][1][e];return i(o?o:e)},u,u.exports,e,t,o,r)}return o[a].exports}for(var l="function"==typeof require&&require,a=0;a';e.core.s.actualSize&&(t+=''),this.core.outer.querySelector(".lg-toolbar").insertAdjacentHTML("beforeend",t),utils.on(e.core.el,"onSlideItemLoad.lgtmzoom",function(t){var o=e.core.s.enableZoomAfter+t.detail.delay;utils.hasClass(document.body,"lg-from-hash")&&t.detail.delay?o=0:utils.removeClass(document.body,"lg-from-hash"),e.zoomabletimeout=setTimeout(function(){utils.addClass(e.core.___slide[t.detail.index],"lg-zoomable")},o+30)});var o=1,r=function t(o){var r=e.core.outer.querySelector(".lg-current .lg-image"),i,l,a=(window.innerWidth-r.clientWidth)/2,s=(window.innerHeight-r.clientHeight)/2+(document.documentElement.scrollTop||document.body.scrollTop);i=e.pageX-a,l=e.pageY-s;var n=(o-1)*i,c=(o-1)*l;utils.setVendor(r,"Transform","scale3d("+o+", "+o+", 1)"),r.setAttribute("data-scale",o),r.parentElement.style.left=-n+"px",r.parentElement.style.top=-c+"px",r.parentElement.setAttribute("data-x",n),r.parentElement.setAttribute("data-y",c)},i=function t(){o>1?utils.addClass(e.core.outer,"lg-zoomed"):e.resetZoom(),o<1&&(o=1),r(o)},l=function t(r,l,a,s){var n=l.clientWidth,c;c=e.core.s.dynamic?e.core.s.dynamicEl[a].width||l.naturalWidth||n:e.core.items[a].getAttribute("data-width")||l.naturalWidth||n;var u;utils.hasClass(e.core.outer,"lg-zoomed")?o=1:c>n&&(u=c/n,o=u||2),s?(e.pageX=window.innerWidth/2,e.pageY=window.innerHeight/2+(document.documentElement.scrollTop||document.body.scrollTop)):(e.pageX=r.pageX||r.targetTouches[0].pageX,e.pageY=r.pageY||r.targetTouches[0].pageY),i(),setTimeout(function(){utils.removeClass(e.core.outer,"lg-grabbing"),utils.addClass(e.core.outer,"lg-grab")},10)},a=!1;utils.on(e.core.el,"onAferAppendSlide.lgtmzoom",function(t){var o=t.detail.index,r=e.core.___slide[o].querySelector(".lg-image");e.core.isTouch||utils.on(r,"dblclick",function(e){l(e,r,o)}),e.core.isTouch&&utils.on(r,"touchstart",function(e){a?(clearTimeout(a),a=null,l(e,r,o)):a=setTimeout(function(){a=null},300),e.preventDefault()})}),utils.on(window,"resize.lgzoom scroll.lgzoom orientationchange.lgzoom",function(){e.pageX=window.innerWidth/2,e.pageY=window.innerHeight/2+(document.documentElement.scrollTop||document.body.scrollTop),r(o)}),utils.on(document.getElementById("lg-zoom-out"),"click.lg",function(){e.core.outer.querySelector(".lg-current .lg-image")&&(o-=e.core.s.scale,i())}),utils.on(document.getElementById("lg-zoom-in"),"click.lg",function(){e.core.outer.querySelector(".lg-current .lg-image")&&(o+=e.core.s.scale,i())}),utils.on(document.getElementById("lg-actual-size"),"click.lg",function(t){l(t,e.core.___slide[e.core.index].querySelector(".lg-image"),e.core.index,!0)}),utils.on(e.core.el,"onBeforeSlide.lgtm",function(){o=1,e.resetZoom()}),e.core.isTouch||e.zoomDrag(),e.core.isTouch&&e.zoomSwipe()},o.prototype.resetZoom=function(){utils.removeClass(this.core.outer,"lg-zoomed");for(var e=0;ee.core.outer.querySelector(".lg").clientHeight,i=r.offsetWidth*r.getAttribute("data-scale")>e.core.outer.querySelector(".lg").clientWidth,(i||l)&&(o.preventDefault(),t={x:o.targetTouches[0].pageX,y:o.targetTouches[0].pageY})}});for(var s=0;s15||Math.abs(o.y-t.y)>15)&&(s.style.left=n+"px",s.style.top=c+"px")}});for(var n=0;ne.core.outer.querySelector(".lg").clientHeight,l=i.offsetWidth*i.getAttribute("data-scale")>e.core.outer.querySelector(".lg").clientWidth,utils.hasClass(e.core.outer,"lg-zoomed")&&utils.hasClass(o.target,"lg-object")&&(l||a)&&(o.preventDefault(),t={x:o.pageX,y:o.pageY},r=!0,e.core.outer.scrollLeft+=1,e.core.outer.scrollLeft-=1,utils.removeClass(e.core.outer,"lg-grab"),utils.addClass(e.core.outer,"lg-grabbing"))});utils.on(window,"mousemove.lgzoom",function(s){if(r){var n=e.core.___slide[e.core.index].querySelector(".lg-img-wrap"),c,u;i=!0,o={x:s.pageX,y:s.pageY},utils.addClass(e.core.outer,"lg-zoom-dragging"),u=a?-Math.abs(n.getAttribute("data-y"))+(o.y-t.y):-Math.abs(n.getAttribute("data-y")),c=l?-Math.abs(n.getAttribute("data-x"))+(o.x-t.x):-Math.abs(n.getAttribute("data-x")),n.style.left=c+"px",n.style.top=u+"px"}}),utils.on(window,"mouseup.lgzoom",function(s){r&&(r=!1,utils.removeClass(e.core.outer,"lg-zoom-dragging"),!i||t.x===o.x&&t.y===o.y||(o={x:s.pageX,y:s.pageY},e.touchendZoom(t,o,l,a)),i=!1),utils.removeClass(e.core.outer,"lg-grabbing"),utils.addClass(e.core.outer,"lg-grab")})},o.prototype.touchendZoom=function(e,t,o,r){var i=this,l=i.core.___slide[i.core.index].querySelector(".lg-img-wrap"),a=i.core.___slide[i.core.index].querySelector(".lg-object"),s=-Math.abs(l.getAttribute("data-x"))+(t.x-e.x),n=-Math.abs(l.getAttribute("data-y"))+(t.y-e.y),c=(i.core.outer.querySelector(".lg").clientHeight-a.offsetHeight)/2,u=Math.abs(a.offsetHeight*Math.abs(a.getAttribute("data-scale"))-i.core.outer.querySelector(".lg").clientHeight+c),d=(i.core.outer.querySelector(".lg").clientWidth-a.offsetWidth)/2,g=Math.abs(a.offsetWidth*Math.abs(a.getAttribute("data-scale"))-i.core.outer.querySelector(".lg").clientWidth+d);(Math.abs(t.x-e.x)>15||Math.abs(t.y-e.y)>15)&&(r&&(n<=-u?n=-u:n>=-c&&(n=-c)),o&&(s<=-g?s=-g:s>=-d&&(s=-d)),r?l.setAttribute("data-y",Math.abs(n)):n=-Math.abs(l.getAttribute("data-y")),o?l.setAttribute("data-x",Math.abs(s)):s=-Math.abs(l.getAttribute("data-x")),l.style.left=s+"px",l.style.top=n+"px")},o.prototype.destroy=function(){var e=this;utils.off(e.core.el,".lgzoom"),utils.off(window,".lgzoom");for(var t=0;t';e.core.s.actualSize&&(t+=''),e.core.s.useLeftForZoom?utils.addClass(e.core.outer,"lg-use-left-for-zoom"):utils.addClass(e.core.outer,"lg-use-transition-for-zoom"),this.core.outer.querySelector(".lg-toolbar").insertAdjacentHTML("beforeend",t),utils.on(e.core.el,"onSlideItemLoad.lgtmzoom",function(t){var o=e.core.s.enableZoomAfter+t.detail.delay;utils.hasClass(document.body,"lg-from-hash")&&t.detail.delay?o=0:utils.removeClass(document.body,"lg-from-hash"),e.zoomabletimeout=setTimeout(function(){utils.addClass(e.core.___slide[t.detail.index],"lg-zoomable")},o+30)});var o=1,r=function t(o){var r=e.core.outer.querySelector(".lg-current .lg-image"),l,i,s=(window.innerWidth-r.clientWidth)/2,a=(window.innerHeight-r.clientHeight)/2+(document.documentElement.scrollTop||document.body.scrollTop);l=e.pageX-s,i=e.pageY-a;var n=(o-1)*l,u=(o-1)*i;utils.setVendor(r,"Transform","scale3d("+o+", "+o+", 1)"),r.setAttribute("data-scale",o),e.core.s.useLeftForZoom?(r.parentElement.style.left=-n+"px",r.parentElement.style.top=-u+"px"):utils.setVendor(r.parentElement,"Transform","translate3d(-"+n+"px, -"+u+"px, 0)"),r.parentElement.setAttribute("data-x",n),r.parentElement.setAttribute("data-y",u)},l=function t(){o>1?utils.addClass(e.core.outer,"lg-zoomed"):e.resetZoom(),o<1&&(o=1),r(o)},i=function t(r,i,s,a){var n=i.clientWidth,u;u=e.core.s.dynamic?e.core.s.dynamicEl[s].width||i.naturalWidth||n:e.core.items[s].getAttribute("data-width")||i.naturalWidth||n;var c;utils.hasClass(e.core.outer,"lg-zoomed")?o=1:u>n&&(c=u/n,o=c||2),a?(e.pageX=window.innerWidth/2,e.pageY=window.innerHeight/2+(document.documentElement.scrollTop||document.body.scrollTop)):(e.pageX=r.pageX||r.targetTouches[0].pageX,e.pageY=r.pageY||r.targetTouches[0].pageY),l(),setTimeout(function(){utils.removeClass(e.core.outer,"lg-grabbing"),utils.addClass(e.core.outer,"lg-grab")},10)},s=!1;utils.on(e.core.el,"onAferAppendSlide.lgtmzoom",function(t){var o=t.detail.index,r=e.core.___slide[o].querySelector(".lg-image");e.core.isTouch||utils.on(r,"dblclick",function(e){i(e,r,o)}),e.core.isTouch&&utils.on(r,"touchstart",function(e){s?(clearTimeout(s),s=null,i(e,r,o)):s=setTimeout(function(){s=null},300),e.preventDefault()})}),utils.on(window,"resize.lgzoom scroll.lgzoom orientationchange.lgzoom",function(){e.pageX=window.innerWidth/2,e.pageY=window.innerHeight/2+(document.documentElement.scrollTop||document.body.scrollTop),r(o)}),utils.on(document.getElementById("lg-zoom-out"),"click.lg",function(){e.core.outer.querySelector(".lg-current .lg-image")&&(o-=e.core.s.scale,l())}),utils.on(document.getElementById("lg-zoom-in"),"click.lg",function(){e.core.outer.querySelector(".lg-current .lg-image")&&(o+=e.core.s.scale,l())}),utils.on(document.getElementById("lg-actual-size"),"click.lg",function(t){i(t,e.core.___slide[e.core.index].querySelector(".lg-image"),e.core.index,!0)}),utils.on(e.core.el,"onBeforeSlide.lgtm",function(){o=1,e.resetZoom()}),e.core.isTouch||e.zoomDrag(),e.core.isTouch&&e.zoomSwipe()},r.prototype.resetZoom=function(){utils.removeClass(this.core.outer,"lg-zoomed");for(var e=0;ee.core.outer.querySelector(".lg").clientHeight,l=r.offsetWidth*r.getAttribute("data-scale")>e.core.outer.querySelector(".lg").clientWidth,(l||i)&&(o.preventDefault(),t={x:o.targetTouches[0].pageX,y:o.targetTouches[0].pageY})}});for(var a=0;a15||Math.abs(o.y-t.y)>15)&&(e.core.s.useLeftForZoom?(a.style.left=n+"px",a.style.top=u+"px"):utils.setVendor(a,"Transform","translate3d("+n+"px, "+u+"px, 0)"))}});for(var n=0;ne.core.outer.querySelector(".lg").clientHeight,i=l.offsetWidth*l.getAttribute("data-scale")>e.core.outer.querySelector(".lg").clientWidth,utils.hasClass(e.core.outer,"lg-zoomed")&&utils.hasClass(o.target,"lg-object")&&(i||s)&&(o.preventDefault(),t={x:o.pageX,y:o.pageY},r=!0,e.core.outer.scrollLeft+=1,e.core.outer.scrollLeft-=1,utils.removeClass(e.core.outer,"lg-grab"),utils.addClass(e.core.outer,"lg-grabbing"))});utils.on(window,"mousemove.lgzoom",function(a){if(r){var n=e.core.___slide[e.core.index].querySelector(".lg-img-wrap"),u,c;l=!0,o={x:a.pageX,y:a.pageY},utils.addClass(e.core.outer,"lg-zoom-dragging"),c=s?-Math.abs(n.getAttribute("data-y"))+(o.y-t.y):-Math.abs(n.getAttribute("data-y")),u=i?-Math.abs(n.getAttribute("data-x"))+(o.x-t.x):-Math.abs(n.getAttribute("data-x")),e.core.s.useLeftForZoom?(n.style.left=u+"px",n.style.top=c+"px"):utils.setVendor(n,"Transform","translate3d("+u+"px, "+c+"px, 0)")}}),utils.on(window,"mouseup.lgzoom",function(a){r&&(r=!1,utils.removeClass(e.core.outer,"lg-zoom-dragging"),!l||t.x===o.x&&t.y===o.y||(o={x:a.pageX,y:a.pageY},e.touchendZoom(t,o,i,s)),l=!1),utils.removeClass(e.core.outer,"lg-grabbing"),utils.addClass(e.core.outer,"lg-grab")})},r.prototype.touchendZoom=function(e,t,o,r){var l=this,i=l.core.___slide[l.core.index].querySelector(".lg-img-wrap"),s=l.core.___slide[l.core.index].querySelector(".lg-object"),a=-Math.abs(i.getAttribute("data-x"))+(t.x-e.x),n=-Math.abs(i.getAttribute("data-y"))+(t.y-e.y),u=(l.core.outer.querySelector(".lg").clientHeight-s.offsetHeight)/2,c=Math.abs(s.offsetHeight*Math.abs(s.getAttribute("data-scale"))-l.core.outer.querySelector(".lg").clientHeight+u),d=(l.core.outer.querySelector(".lg").clientWidth-s.offsetWidth)/2,g=Math.abs(s.offsetWidth*Math.abs(s.getAttribute("data-scale"))-l.core.outer.querySelector(".lg").clientWidth+d);(Math.abs(t.x-e.x)>15||Math.abs(t.y-e.y)>15)&&(r&&(n<=-c?n=-c:n>=-u&&(n=-u)),o&&(a<=-g?a=-g:a>=-d&&(a=-d)),r?i.setAttribute("data-y",Math.abs(n)):n=-Math.abs(i.getAttribute("data-y")),o?i.setAttribute("data-x",Math.abs(a)):a=-Math.abs(i.getAttribute("data-x")),l.core.s.useLeftForZoom?(i.style.left=a+"px",i.style.top=n+"px"):utils.setVendor(i,"Transform","translate3d("+a+"px, "+n+"px, 0)"))},r.prototype.destroy=function(){var e=this;utils.off(e.core.el,".lgzoom"),utils.off(window,".lgzoom");for(var t=0;t