533 lines
20 KiB
JavaScript
533 lines
20 KiB
JavaScript
|
/**!
|
||
|
|
* lg-zoom.js | 0.0.2 | August 4th 2016
|
||
|
|
* http://sachinchoolur.github.io/lg-zoom.js
|
||
|
|
* Copyright (c) 2016 Sachin N;
|
||
|
|
* @license Apache 2.0
|
||
|
|
*/(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.LgZoom = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
|
||
|
|
(function (global, factory) {
|
||
|
|
if (typeof define === "function" && define.amd) {
|
||
|
|
define([], factory);
|
||
|
|
} else if (typeof exports !== "undefined") {
|
||
|
|
factory();
|
||
|
|
} else {
|
||
|
|
var mod = {
|
||
|
|
exports: {}
|
||
|
|
};
|
||
|
|
factory();
|
||
|
|
global.lgZoom = mod.exports;
|
||
|
|
}
|
||
|
|
})(this, function () {
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
var _extends = Object.assign || function (target) {
|
||
|
|
for (var i = 1; i < arguments.length; i++) {
|
||
|
|
var source = arguments[i];
|
||
|
|
|
||
|
|
for (var key in source) {
|
||
|
|
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
||
|
|
target[key] = source[key];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return target;
|
||
|
|
};
|
||
|
|
|
||
|
|
var zoomDefaults = {
|
||
|
|
scale: 1,
|
||
|
|
zoom: true,
|
||
|
|
actualSize: true,
|
||
|
|
enableZoomAfter: 300
|
||
|
|
};
|
||
|
|
|
||
|
|
var Zoom = function Zoom(element) {
|
||
|
|
|
||
|
|
this.el = element;
|
||
|
|
|
||
|
|
this.core = window.lgData[this.el.getAttribute('lg-uid')];
|
||
|
|
this.core.s = _extends({}, zoomDefaults, this.core.s);
|
||
|
|
|
||
|
|
if (this.core.s.zoom && this.core.doCss()) {
|
||
|
|
this.init();
|
||
|
|
|
||
|
|
// Store the zoomable timeout value just to clear it while closing
|
||
|
|
this.zoomabletimeout = false;
|
||
|
|
|
||
|
|
// Set the initial value center
|
||
|
|
this.pageX = window.innerWidth / 2;
|
||
|
|
this.pageY = window.innerHeight / 2 + (document.documentElement.scrollTop || document.body.scrollTop);
|
||
|
|
}
|
||
|
|
|
||
|
|
return this;
|
||
|
|
};
|
||
|
|
|
||
|
|
Zoom.prototype.init = function () {
|
||
|
|
|
||
|
|
var _this = this;
|
||
|
|
var zoomIcons = '<span id="lg-zoom-in" class="lg-icon"></span><span id="lg-zoom-out" class="lg-icon"></span>';
|
||
|
|
|
||
|
|
if (_this.core.s.actualSize) {
|
||
|
|
zoomIcons += '<span id="lg-actual-size" class="lg-icon"></span>';
|
||
|
|
}
|
||
|
|
|
||
|
|
this.core.outer.querySelector('.lg-toolbar').insertAdjacentHTML('beforeend', zoomIcons);
|
||
|
|
|
||
|
|
// Add zoomable class
|
||
|
|
utils.on(_this.core.el, 'onSlideItemLoad.lgtmzoom', function (event) {
|
||
|
|
|
||
|
|
// delay will be 0 except first time
|
||
|
|
var _speed = _this.core.s.enableZoomAfter + event.detail.delay;
|
||
|
|
|
||
|
|
// set _speed value 0 if gallery opened from direct url and if it is first slide
|
||
|
|
if (utils.hasClass(document.body, 'lg-from-hash') && event.detail.delay) {
|
||
|
|
|
||
|
|
// will execute only once
|
||
|
|
_speed = 0;
|
||
|
|
} else {
|
||
|
|
|
||
|
|
// Remove lg-from-hash to enable starting animation.
|
||
|
|
utils.removeClass(document.body, 'lg-from-hash');
|
||
|
|
}
|
||
|
|
|
||
|
|
_this.zoomabletimeout = setTimeout(function () {
|
||
|
|
utils.addClass(_this.core.___slide[event.detail.index], 'lg-zoomable');
|
||
|
|
}, _speed + 30);
|
||
|
|
});
|
||
|
|
|
||
|
|
var scale = 1;
|
||
|
|
/**
|
||
|
|
* @desc Image zoom
|
||
|
|
* Translate the wrap and scale the image to get better user experience
|
||
|
|
*
|
||
|
|
* @param {String} scaleVal - Zoom decrement/increment value
|
||
|
|
*/
|
||
|
|
var zoom = function zoom(scaleVal) {
|
||
|
|
|
||
|
|
var image = _this.core.outer.querySelector('.lg-current .lg-image');
|
||
|
|
var _x;
|
||
|
|
var _y;
|
||
|
|
|
||
|
|
// Find offset manually to avoid issue after zoom
|
||
|
|
var offsetX = (window.innerWidth - image.clientWidth) / 2;
|
||
|
|
var offsetY = (window.innerHeight - image.clientHeight) / 2 + (document.documentElement.scrollTop || document.body.scrollTop);
|
||
|
|
|
||
|
|
_x = _this.pageX - offsetX;
|
||
|
|
_y = _this.pageY - offsetY;
|
||
|
|
|
||
|
|
var x = (scaleVal - 1) * _x;
|
||
|
|
var y = (scaleVal - 1) * _y;
|
||
|
|
|
||
|
|
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';
|
||
|
|
image.parentElement.setAttribute('data-x', x);
|
||
|
|
image.parentElement.setAttribute('data-y', y);
|
||
|
|
};
|
||
|
|
|
||
|
|
var callScale = function callScale() {
|
||
|
|
if (scale > 1) {
|
||
|
|
utils.addClass(_this.core.outer, 'lg-zoomed');
|
||
|
|
} else {
|
||
|
|
_this.resetZoom();
|
||
|
|
}
|
||
|
|
|
||
|
|
if (scale < 1) {
|
||
|
|
scale = 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
zoom(scale);
|
||
|
|
};
|
||
|
|
|
||
|
|
var actualSize = function actualSize(event, image, index, fromIcon) {
|
||
|
|
var w = image.clientWidth;
|
||
|
|
var nw;
|
||
|
|
if (_this.core.s.dynamic) {
|
||
|
|
nw = _this.core.s.dynamicEl[index].width || image.naturalWidth || w;
|
||
|
|
} else {
|
||
|
|
nw = _this.core.items[index].getAttribute('data-width') || image.naturalWidth || w;
|
||
|
|
}
|
||
|
|
|
||
|
|
var _scale;
|
||
|
|
|
||
|
|
if (utils.hasClass(_this.core.outer, 'lg-zoomed')) {
|
||
|
|
scale = 1;
|
||
|
|
} else {
|
||
|
|
if (nw > w) {
|
||
|
|
_scale = nw / w;
|
||
|
|
scale = _scale || 2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (fromIcon) {
|
||
|
|
_this.pageX = window.innerWidth / 2;
|
||
|
|
_this.pageY = window.innerHeight / 2 + (document.documentElement.scrollTop || document.body.scrollTop);
|
||
|
|
} else {
|
||
|
|
_this.pageX = event.pageX || event.targetTouches[0].pageX;
|
||
|
|
_this.pageY = event.pageY || event.targetTouches[0].pageY;
|
||
|
|
}
|
||
|
|
|
||
|
|
callScale();
|
||
|
|
setTimeout(function () {
|
||
|
|
utils.removeClass(_this.core.outer, 'lg-grabbing');
|
||
|
|
utils.addClass(_this.core.outer, 'lg-grab');
|
||
|
|
}, 10);
|
||
|
|
};
|
||
|
|
|
||
|
|
var tapped = false;
|
||
|
|
|
||
|
|
// event triggered after appending slide content
|
||
|
|
utils.on(_this.core.el, 'onAferAppendSlide.lgtmzoom', function (event) {
|
||
|
|
|
||
|
|
var index = event.detail.index;
|
||
|
|
|
||
|
|
// Get the current element
|
||
|
|
var image = _this.core.___slide[index].querySelector('.lg-image');
|
||
|
|
|
||
|
|
if (!_this.core.isTouch) {
|
||
|
|
utils.on(image, 'dblclick', function (event) {
|
||
|
|
actualSize(event, image, index);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
if (_this.core.isTouch) {
|
||
|
|
utils.on(image, 'touchstart', function (event) {
|
||
|
|
if (!tapped) {
|
||
|
|
tapped = setTimeout(function () {
|
||
|
|
tapped = null;
|
||
|
|
}, 300);
|
||
|
|
} else {
|
||
|
|
clearTimeout(tapped);
|
||
|
|
tapped = null;
|
||
|
|
actualSize(event, image, index);
|
||
|
|
}
|
||
|
|
|
||
|
|
event.preventDefault();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Update zoom on resize and orientationchange
|
||
|
|
utils.on(window, 'resize.lgzoom scroll.lgzoom orientationchange.lgzoom', function () {
|
||
|
|
_this.pageX = window.innerWidth / 2;
|
||
|
|
_this.pageY = window.innerHeight / 2 + (document.documentElement.scrollTop || document.body.scrollTop);
|
||
|
|
zoom(scale);
|
||
|
|
});
|
||
|
|
|
||
|
|
utils.on(document.getElementById('lg-zoom-out'), 'click.lg', function () {
|
||
|
|
if (_this.core.outer.querySelector('.lg-current .lg-image')) {
|
||
|
|
scale -= _this.core.s.scale;
|
||
|
|
callScale();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
utils.on(document.getElementById('lg-zoom-in'), 'click.lg', function () {
|
||
|
|
if (_this.core.outer.querySelector('.lg-current .lg-image')) {
|
||
|
|
scale += _this.core.s.scale;
|
||
|
|
callScale();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
utils.on(document.getElementById('lg-actual-size'), 'click.lg', function (event) {
|
||
|
|
actualSize(event, _this.core.___slide[_this.core.index].querySelector('.lg-image'), _this.core.index, true);
|
||
|
|
});
|
||
|
|
|
||
|
|
// Reset zoom on slide change
|
||
|
|
utils.on(_this.core.el, 'onBeforeSlide.lgtm', function () {
|
||
|
|
scale = 1;
|
||
|
|
_this.resetZoom();
|
||
|
|
});
|
||
|
|
|
||
|
|
// Drag option after zoom
|
||
|
|
if (!_this.core.isTouch) {
|
||
|
|
_this.zoomDrag();
|
||
|
|
}
|
||
|
|
|
||
|
|
if (_this.core.isTouch) {
|
||
|
|
_this.zoomSwipe();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// Reset zoom effect
|
||
|
|
Zoom.prototype.resetZoom = function () {
|
||
|
|
utils.removeClass(this.core.outer, 'lg-zoomed');
|
||
|
|
for (var i = 0; i < this.core.___slide.length; i++) {
|
||
|
|
if (this.core.___slide[i].querySelector('.lg-img-wrap')) {
|
||
|
|
this.core.___slide[i].querySelector('.lg-img-wrap').removeAttribute('style');
|
||
|
|
this.core.___slide[i].querySelector('.lg-img-wrap').removeAttribute('data-x');
|
||
|
|
this.core.___slide[i].querySelector('.lg-img-wrap').removeAttribute('data-y');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
for (var j = 0; j < this.core.___slide.length; j++) {
|
||
|
|
if (this.core.___slide[j].querySelector('.lg-image')) {
|
||
|
|
this.core.___slide[j].querySelector('.lg-image').removeAttribute('style');
|
||
|
|
this.core.___slide[j].querySelector('.lg-image').removeAttribute('data-scale');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Reset pagx pagy values to center
|
||
|
|
this.pageX = window.innerWidth / 2;
|
||
|
|
this.pageY = window.innerHeight / 2 + (document.documentElement.scrollTop || document.body.scrollTop);
|
||
|
|
};
|
||
|
|
|
||
|
|
Zoom.prototype.zoomSwipe = function () {
|
||
|
|
var _this = this;
|
||
|
|
var startCoords = {};
|
||
|
|
var endCoords = {};
|
||
|
|
var isMoved = false;
|
||
|
|
|
||
|
|
// Allow x direction drag
|
||
|
|
var allowX = false;
|
||
|
|
|
||
|
|
// Allow Y direction drag
|
||
|
|
var allowY = false;
|
||
|
|
|
||
|
|
for (var i = 0; i < _this.core.___slide.length; i++) {
|
||
|
|
|
||
|
|
/*jshint loopfunc: true */
|
||
|
|
utils.on(_this.core.___slide[i], 'touchstart.lg', function (e) {
|
||
|
|
|
||
|
|
if (utils.hasClass(_this.core.outer, 'lg-zoomed')) {
|
||
|
|
var image = _this.core.___slide[_this.core.index].querySelector('.lg-object');
|
||
|
|
|
||
|
|
allowY = image.offsetHeight * image.getAttribute('data-scale') > _this.core.outer.querySelector('.lg').clientHeight;
|
||
|
|
allowX = image.offsetWidth * image.getAttribute('data-scale') > _this.core.outer.querySelector('.lg').clientWidth;
|
||
|
|
if (allowX || allowY) {
|
||
|
|
e.preventDefault();
|
||
|
|
startCoords = {
|
||
|
|
x: e.targetTouches[0].pageX,
|
||
|
|
y: e.targetTouches[0].pageY
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
for (var j = 0; j < _this.core.___slide.length; j++) {
|
||
|
|
|
||
|
|
/*jshint loopfunc: true */
|
||
|
|
utils.on(_this.core.___slide[j], 'touchmove.lg', function (e) {
|
||
|
|
|
||
|
|
if (utils.hasClass(_this.core.outer, 'lg-zoomed')) {
|
||
|
|
|
||
|
|
var _el = _this.core.___slide[_this.core.index].querySelector('.lg-img-wrap');
|
||
|
|
var distanceX;
|
||
|
|
var distanceY;
|
||
|
|
|
||
|
|
e.preventDefault();
|
||
|
|
isMoved = true;
|
||
|
|
|
||
|
|
endCoords = {
|
||
|
|
x: e.targetTouches[0].pageX,
|
||
|
|
y: e.targetTouches[0].pageY
|
||
|
|
};
|
||
|
|
|
||
|
|
// reset opacity and transition duration
|
||
|
|
utils.addClass(_this.core.outer, 'lg-zoom-dragging');
|
||
|
|
|
||
|
|
if (allowY) {
|
||
|
|
distanceY = -Math.abs(_el.getAttribute('data-y')) + (endCoords.y - startCoords.y);
|
||
|
|
} else {
|
||
|
|
distanceY = -Math.abs(_el.getAttribute('data-y'));
|
||
|
|
}
|
||
|
|
|
||
|
|
if (allowX) {
|
||
|
|
distanceX = -Math.abs(_el.getAttribute('data-x')) + (endCoords.x - startCoords.x);
|
||
|
|
} else {
|
||
|
|
distanceX = -Math.abs(_el.getAttribute('data-x'));
|
||
|
|
}
|
||
|
|
|
||
|
|
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';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
for (var k = 0; k < _this.core.___slide.length; k++) {
|
||
|
|
|
||
|
|
/*jshint loopfunc: true */
|
||
|
|
utils.on(_this.core.___slide[k], 'touchend.lg', function () {
|
||
|
|
if (utils.hasClass(_this.core.outer, 'lg-zoomed')) {
|
||
|
|
if (isMoved) {
|
||
|
|
isMoved = false;
|
||
|
|
utils.removeClass(_this.core.outer, 'lg-zoom-dragging');
|
||
|
|
_this.touchendZoom(startCoords, endCoords, allowX, allowY);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
Zoom.prototype.zoomDrag = function () {
|
||
|
|
|
||
|
|
var _this = this;
|
||
|
|
var startCoords = {};
|
||
|
|
var endCoords = {};
|
||
|
|
var isDraging = false;
|
||
|
|
var isMoved = false;
|
||
|
|
|
||
|
|
// Allow x direction drag
|
||
|
|
var allowX = false;
|
||
|
|
|
||
|
|
// Allow Y direction drag
|
||
|
|
var allowY = false;
|
||
|
|
|
||
|
|
for (var i = 0; i < _this.core.___slide.length; i++) {
|
||
|
|
|
||
|
|
/*jshint loopfunc: true */
|
||
|
|
utils.on(_this.core.___slide[i], 'mousedown.lgzoom', function (e) {
|
||
|
|
|
||
|
|
// execute only on .lg-object
|
||
|
|
var image = _this.core.___slide[_this.core.index].querySelector('.lg-object');
|
||
|
|
|
||
|
|
allowY = image.offsetHeight * image.getAttribute('data-scale') > _this.core.outer.querySelector('.lg').clientHeight;
|
||
|
|
allowX = image.offsetWidth * image.getAttribute('data-scale') > _this.core.outer.querySelector('.lg').clientWidth;
|
||
|
|
|
||
|
|
if (utils.hasClass(_this.core.outer, 'lg-zoomed')) {
|
||
|
|
if (utils.hasClass(e.target, 'lg-object') && (allowX || allowY)) {
|
||
|
|
e.preventDefault();
|
||
|
|
startCoords = {
|
||
|
|
x: e.pageX,
|
||
|
|
y: e.pageY
|
||
|
|
};
|
||
|
|
|
||
|
|
isDraging = true;
|
||
|
|
|
||
|
|
// ** Fix for webkit cursor issue https://code.google.com/p/chromium/issues/detail?id=26723
|
||
|
|
_this.core.outer.scrollLeft += 1;
|
||
|
|
_this.core.outer.scrollLeft -= 1;
|
||
|
|
|
||
|
|
utils.removeClass(_this.core.outer, 'lg-grab');
|
||
|
|
utils.addClass(_this.core.outer, 'lg-grabbing');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
utils.on(window, 'mousemove.lgzoom', function (e) {
|
||
|
|
if (isDraging) {
|
||
|
|
var _el = _this.core.___slide[_this.core.index].querySelector('.lg-img-wrap');
|
||
|
|
var distanceX;
|
||
|
|
var distanceY;
|
||
|
|
|
||
|
|
isMoved = true;
|
||
|
|
endCoords = {
|
||
|
|
x: e.pageX,
|
||
|
|
y: e.pageY
|
||
|
|
};
|
||
|
|
|
||
|
|
// reset opacity and transition duration
|
||
|
|
utils.addClass(_this.core.outer, 'lg-zoom-dragging');
|
||
|
|
|
||
|
|
if (allowY) {
|
||
|
|
distanceY = -Math.abs(_el.getAttribute('data-y')) + (endCoords.y - startCoords.y);
|
||
|
|
} else {
|
||
|
|
distanceY = -Math.abs(_el.getAttribute('data-y'));
|
||
|
|
}
|
||
|
|
|
||
|
|
if (allowX) {
|
||
|
|
distanceX = -Math.abs(_el.getAttribute('data-x')) + (endCoords.x - startCoords.x);
|
||
|
|
} else {
|
||
|
|
distanceX = -Math.abs(_el.getAttribute('data-x'));
|
||
|
|
}
|
||
|
|
|
||
|
|
_el.style.left = distanceX + 'px';
|
||
|
|
_el.style.top = distanceY + 'px';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
utils.on(window, 'mouseup.lgzoom', function (e) {
|
||
|
|
|
||
|
|
if (isDraging) {
|
||
|
|
isDraging = false;
|
||
|
|
utils.removeClass(_this.core.outer, 'lg-zoom-dragging');
|
||
|
|
|
||
|
|
// Fix for chrome mouse move on click
|
||
|
|
if (isMoved && (startCoords.x !== endCoords.x || startCoords.y !== endCoords.y)) {
|
||
|
|
endCoords = {
|
||
|
|
x: e.pageX,
|
||
|
|
y: e.pageY
|
||
|
|
};
|
||
|
|
_this.touchendZoom(startCoords, endCoords, allowX, allowY);
|
||
|
|
}
|
||
|
|
|
||
|
|
isMoved = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
utils.removeClass(_this.core.outer, 'lg-grabbing');
|
||
|
|
utils.addClass(_this.core.outer, 'lg-grab');
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
Zoom.prototype.touchendZoom = function (startCoords, endCoords, allowX, allowY) {
|
||
|
|
|
||
|
|
var _this = this;
|
||
|
|
var _el = _this.core.___slide[_this.core.index].querySelector('.lg-img-wrap');
|
||
|
|
var image = _this.core.___slide[_this.core.index].querySelector('.lg-object');
|
||
|
|
var distanceX = -Math.abs(_el.getAttribute('data-x')) + (endCoords.x - startCoords.x);
|
||
|
|
var distanceY = -Math.abs(_el.getAttribute('data-y')) + (endCoords.y - startCoords.y);
|
||
|
|
var minY = (_this.core.outer.querySelector('.lg').clientHeight - image.offsetHeight) / 2;
|
||
|
|
var maxY = Math.abs(image.offsetHeight * Math.abs(image.getAttribute('data-scale')) - _this.core.outer.querySelector('.lg').clientHeight + minY);
|
||
|
|
var minX = (_this.core.outer.querySelector('.lg').clientWidth - image.offsetWidth) / 2;
|
||
|
|
var maxX = Math.abs(image.offsetWidth * Math.abs(image.getAttribute('data-scale')) - _this.core.outer.querySelector('.lg').clientWidth + minX);
|
||
|
|
|
||
|
|
if (Math.abs(endCoords.x - startCoords.x) > 15 || Math.abs(endCoords.y - startCoords.y) > 15) {
|
||
|
|
if (allowY) {
|
||
|
|
if (distanceY <= -maxY) {
|
||
|
|
distanceY = -maxY;
|
||
|
|
} else if (distanceY >= -minY) {
|
||
|
|
distanceY = -minY;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (allowX) {
|
||
|
|
if (distanceX <= -maxX) {
|
||
|
|
distanceX = -maxX;
|
||
|
|
} else if (distanceX >= -minX) {
|
||
|
|
distanceX = -minX;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (allowY) {
|
||
|
|
_el.setAttribute('data-y', Math.abs(distanceY));
|
||
|
|
} else {
|
||
|
|
distanceY = -Math.abs(_el.getAttribute('data-y'));
|
||
|
|
}
|
||
|
|
|
||
|
|
if (allowX) {
|
||
|
|
_el.setAttribute('data-x', Math.abs(distanceX));
|
||
|
|
} else {
|
||
|
|
distanceX = -Math.abs(_el.getAttribute('data-x'));
|
||
|
|
}
|
||
|
|
|
||
|
|
_el.style.left = distanceX + 'px';
|
||
|
|
_el.style.top = distanceY + 'px';
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
Zoom.prototype.destroy = function () {
|
||
|
|
|
||
|
|
var _this = this;
|
||
|
|
|
||
|
|
// Unbind all events added by lightGallery zoom plugin
|
||
|
|
utils.off(_this.core.el, '.lgzoom');
|
||
|
|
utils.off(window, '.lgzoom');
|
||
|
|
for (var i = 0; i < _this.core.___slide.length; i++) {
|
||
|
|
utils.off(_this.core.___slide[i], '.lgzoom');
|
||
|
|
}
|
||
|
|
|
||
|
|
utils.off(_this.core.el, '.lgtmzoom');
|
||
|
|
_this.resetZoom();
|
||
|
|
clearTimeout(_this.zoomabletimeout);
|
||
|
|
_this.zoomabletimeout = false;
|
||
|
|
};
|
||
|
|
|
||
|
|
window.lgModules.zoom = Zoom;
|
||
|
|
});
|
||
|
|
|
||
|
|
},{}]},{},[1])(1)
|
||
|
|
});
|