Skip to content

Commit

Permalink
Fix zoom transition performance issues on chrome..
Browse files Browse the repository at this point in the history
  • Loading branch information
@sachinchoolur
sachinchoolur committed Dec 22, 2016
1 parent dba206b commit c931ad9
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 12 deletions.
55 changes: 45 additions & 10 deletions demo/js/lg-zoom.js
View file
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -70,6 +81,12 @@
zoomIcons += '<span id="lg-actual-size" class="lg-icon"></span>';
}

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
Expand Down Expand Up @@ -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);
};
Expand Down Expand Up @@ -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)');
}
}
}
});
Expand Down Expand Up @@ -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)');
}
}
});

Expand Down Expand Up @@ -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)');
}
}
};

Expand Down
Loading

1 comment on commit c931ad9

@yaser-alazm
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi, I've included the zoom plugin inside my project but unfortunately it's not working. First I included the lg-zoom.min.js file inside my js folder and called it . I think it supposed to activate once it's been called because the default value it takes is true. Even if I added the value inside my main.js function it doesn't work. any recommendations ?

Please sign in to comment.