lightgallery
Version:
A lightweight, customizable, modular, responsive, lightbox gallery plugin for jQuery.
677 lines (549 loc) • 23.3 kB
JavaScript
/*! lg-zoom - v1.3.0-beta.0 - October-05-2020
* http://sachinchoolur.github.io/lightGallery
* Copyright (c) 2020 Sachin N; Licensed GPLv3 */
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module unless amdModuleId is set
define(['jquery'], function (a0) {
return (factory(a0));
});
} else if (typeof module === 'object' && module.exports) {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory(require('jquery'));
} else {
factory(root["jQuery"]);
}
}(this, function ($) {
(function() {
'use strict';
var getUseLeft = function() {
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 defaults = {
scale: 1,
zoom: true,
actualSize: true,
enableZoomAfter: 300,
useLeftForZoom: getUseLeft()
};
var Zoom = function(element) {
this.core = $(element).data('lightGallery');
this.core.s = $.extend({}, defaults, 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).width() / 2;
this.pageY = ($(window).height() / 2) + $(window).scrollTop();
}
return this;
};
Zoom.prototype.init = function() {
var _this = this;
var zoomIcons = '<button type="button" aria-label="Zoom in" id="lg-zoom-in" class="lg-icon"></button><button type="button" aria-label="Zoom out" id="lg-zoom-out" class="lg-icon"></button>';
if (_this.core.s.actualSize) {
zoomIcons += '<button type="button" aria-label="Actual size" id="lg-actual-size" class="lg-icon"></button>';
}
if (_this.core.s.useLeftForZoom) {
_this.core.$outer.addClass('lg-use-left-for-zoom');
} else {
_this.core.$outer.addClass('lg-use-transition-for-zoom');
}
this.core.$outer.find('.lg-toolbar').append(zoomIcons);
// Add zoomable class
_this.core.$el.on('onSlideItemLoad.lg.tm.zoom', function(event, index, delay) {
// delay will be 0 except first time
var _speed = _this.core.s.enableZoomAfter + delay;
// set _speed value 0 if gallery opened from direct url and if it is first slide
if ($('body').hasClass('lg-from-hash') && delay) {
// will execute only once
_speed = 0;
} else {
// Remove lg-from-hash to enable starting animation.
$('body').removeClass('lg-from-hash');
}
_this.zoomabletimeout = setTimeout(function() {
_this.core.$slide.eq(index).addClass('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(scaleVal) {
var $image = _this.core.$outer.find('.lg-current .lg-image');
var _x;
var _y;
// Find offset manually to avoid issue after zoom
var offsetX = ($(window).width() - $image.prop('offsetWidth')) / 2;
var offsetY = (($(window).height() - $image.prop('offsetHeight')) / 2) + $(window).scrollTop();
_x = _this.pageX - offsetX;
_y = _this.pageY - offsetY;
var x = (scaleVal - 1) * (_x);
var y = (scaleVal - 1) * (_y);
$image.css('transform', 'scale3d(' + scaleVal + ', ' + scaleVal + ', 1)').attr('data-scale', scaleVal);
if (_this.core.s.useLeftForZoom) {
$image.parent().css({
left: -x + 'px',
top: -y + 'px'
}).attr('data-x', x).attr('data-y', y);
} else {
$image.parent().css('transform', 'translate3d(-' + x + 'px, -' + y + 'px, 0)').attr('data-x', x).attr('data-y', y);
}
};
var callScale = function() {
if (scale > 1) {
_this.core.$outer.addClass('lg-zoomed');
} else {
_this.resetZoom();
}
if (scale < 1) {
scale = 1;
}
zoom(scale);
};
var actualSize = function(event, $image, index, fromIcon) {
var w = $image.prop('offsetWidth');
var nw;
if (_this.core.s.dynamic) {
nw = _this.core.s.dynamicEl[index].width || $image[0].naturalWidth || w;
} else {
nw = _this.core.$items.eq(index).attr('data-width') || $image[0].naturalWidth || w;
}
var _scale;
if (_this.core.$outer.hasClass('lg-zoomed')) {
scale = 1;
} else {
if (nw > w) {
_scale = nw / w;
scale = _scale || 2;
}
}
if (fromIcon) {
_this.pageX = $(window).width() / 2;
_this.pageY = ($(window).height() / 2) + $(window).scrollTop();
} else {
_this.pageX = event.pageX || event.originalEvent.targetTouches[0].pageX;
_this.pageY = event.pageY || event.originalEvent.targetTouches[0].pageY;
}
callScale();
setTimeout(function() {
_this.core.$outer.removeClass('lg-grabbing').addClass('lg-grab');
}, 10);
};
var tapped = false;
// event triggered after appending slide content
_this.core.$el.on('onAferAppendSlide.lg.tm.zoom', function(event, index) {
// Get the current element
var $image = _this.core.$slide.eq(index).find('.lg-image');
$image.on('dblclick', function(event) {
actualSize(event, $image, index);
});
$image.on('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
$(window).on('resize.lg.zoom scroll.lg.zoom orientationchange.lg.zoom', function() {
_this.pageX = $(window).width() / 2;
_this.pageY = ($(window).height() / 2) + $(window).scrollTop();
zoom(scale);
});
$('#lg-zoom-out').on('click.lg', function() {
if (_this.core.$outer.find('.lg-current .lg-image').length) {
scale -= _this.core.s.scale;
callScale();
}
});
$('#lg-zoom-in').on('click.lg', function() {
if (_this.core.$outer.find('.lg-current .lg-image').length) {
scale += _this.core.s.scale;
callScale();
}
});
$('#lg-actual-size').on('click.lg', function(event) {
actualSize(event, _this.core.$slide.eq(_this.core.index).find('.lg-image'), _this.core.index, true);
});
// Reset zoom on slide change
_this.core.$el.on('onBeforeSlide.lg.tm', function() {
scale = 1;
_this.resetZoom();
});
// Drag option after zoom
_this.zoomDrag();
_this.zoomSwipe();
};
/**
*
* @param {Element} el
* @return matrix(cos(X), sin(X), -sin(X), cos(X), 0, 0);
* Get the current transform value
*/
Zoom.prototype.getCurrentTransform = function (el) {
if (!el) {
return 0;
}
var st = window.getComputedStyle(el, null);
var tm = st.getPropertyValue('-webkit-transform') ||
st.getPropertyValue('-moz-transform') ||
st.getPropertyValue('-ms-transform') ||
st.getPropertyValue('-o-transform') ||
st.getPropertyValue('transform') ||
'none';
if (tm !== 'none') {
return tm.split('(')[1].split(')')[0].split(',');
}
return 0;
};
Zoom.prototype.getCurrentRotation = function (el) {
if (!el) {
return 0;
}
var values = this.getCurrentTransform(el);
if (values) {
return Math.round(Math.atan2(values[1], values[0]) * (180 / Math.PI));
// If you want rotate in 360
//return (angle < 0 ? angle + 360 : angle);
}
return 0;
};
Zoom.prototype.getModifier = function (rotateValue, axis, el) {
var originalRotate = rotateValue;
rotateValue = Math.abs(rotateValue);
var transformValues = this.getCurrentTransform(el);
if (!transformValues) {
return 1;
}
var modifier = 1;
if (axis === 'X') {
var flipHorizontalValue = Math.sign(parseFloat(transformValues[0]));
if (rotateValue === 0 || rotateValue === 180) {
modifier = 1;
} else if (rotateValue === 90) {
if ((originalRotate === -90 && flipHorizontalValue === 1) || (originalRotate === 90 && flipHorizontalValue === -1)) {
modifier = -1;
} else {
modifier = 1;
}
}
modifier = modifier * flipHorizontalValue;
} else {
var flipVerticalValue = Math.sign(parseFloat(transformValues[3]));
if (rotateValue === 0 || rotateValue === 180) {
modifier = 1;
} else if (rotateValue === 90) {
var sinX = parseFloat(transformValues[1]);
var sinMinusX = parseFloat(transformValues[2]);
modifier = Math.sign(sinX * sinMinusX * originalRotate * flipVerticalValue);
}
modifier = modifier * flipVerticalValue;
}
return modifier;
};
Zoom.prototype.getImageSize = function ($image, rotateValue, axis) {
var imageSizes = {
y: 'offsetHeight',
x: 'offsetWidth'
};
if (rotateValue === 90) {
// Swap axis
if (axis === 'x') {
axis = 'y';
} else {
axis = 'x';
}
}
return $image.prop(imageSizes[axis]);
};
Zoom.prototype.getDragCords = function (e, rotateValue) {
if (rotateValue === 90) {
return {
x: e.pageY,
y: e.pageX
};
} else {
return {
x: e.pageX,
y: e.pageY
};
}
};
Zoom.prototype.getSwipeCords = function (e, rotateValue) {
var x = e.originalEvent.targetTouches[0].pageX;
var y = e.originalEvent.targetTouches[0].pageY;
if (rotateValue === 90) {
return {
x: y,
y: x
};
} else {
return {
x: x,
y: y
};
}
};
Zoom.prototype.getPossibleDragCords = function ($image, rotateValue) {
var minY = (this.core.$outer.find('.lg').height() - this.getImageSize($image, rotateValue, 'y')) / 2;
var maxY = Math.abs((this.getImageSize($image, rotateValue, 'y') * Math.abs($image.attr('data-scale'))) - this.core.$outer.find('.lg').height() + minY);
var minX = (this.core.$outer.find('.lg').width() - this.getImageSize($image, rotateValue, 'x')) / 2;
var maxX = Math.abs((this.getImageSize($image, rotateValue, 'x') * Math.abs($image.attr('data-scale'))) - this.core.$outer.find('.lg').width() + minX);
if (rotateValue === 90) {
return {
minY: minX,
maxY: maxX,
minX: minY,
maxX: maxY,
};
} else {
return {
minY: minY,
maxY: maxY,
minX: minX,
maxX: maxX,
};
}
};
Zoom.prototype.getDragAllowedAxises = function ($image, rotateValue) {
var allowY = this.getImageSize($image, rotateValue, 'y') * $image.attr('data-scale') > this.core.$outer.find('.lg').height();
var allowX = this.getImageSize($image, rotateValue, 'x') * $image.attr('data-scale') > this.core.$outer.find('.lg').width();
if (rotateValue === 90) {
return {
allowX: allowY,
allowY: allowX
};
} else {
return {
allowX: allowX,
allowY: allowY
};
}
};
// Reset zoom effect
Zoom.prototype.resetZoom = function() {
this.core.$outer.removeClass('lg-zoomed');
this.core.$slide.find('.lg-img-wrap').removeAttr('style data-x data-y');
this.core.$slide.find('.lg-image').removeAttr('style data-scale');
// Reset pagx pagy values to center
this.pageX = $(window).width() / 2;
this.pageY = ($(window).height() / 2) + $(window).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;
var rotateValue = 0;
var rotateEl;
_this.core.$slide.on('touchstart.lg', function(e) {
if (_this.core.$outer.hasClass('lg-zoomed')) {
var $image = _this.core.$slide.eq(_this.core.index).find('.lg-object');
rotateEl = _this.core.$slide.eq(_this.core.index).find('.lg-img-rotate')[0];
rotateValue = _this.getCurrentRotation(rotateEl);
var dragAllowedAxises = _this.getDragAllowedAxises($image, Math.abs(rotateValue));
allowY = dragAllowedAxises.allowY;
allowX = dragAllowedAxises.allowX;
if ((allowX || allowY)) {
e.preventDefault();
startCoords = _this.getSwipeCords(e, Math.abs(rotateValue));
}
}
});
_this.core.$slide.on('touchmove.lg', function(e) {
if (_this.core.$outer.hasClass('lg-zoomed')) {
var _$el = _this.core.$slide.eq(_this.core.index).find('.lg-img-wrap');
var distanceX;
var distanceY;
e.preventDefault();
isMoved = true;
endCoords = _this.getSwipeCords(e, Math.abs(rotateValue));
// reset opacity and transition duration
_this.core.$outer.addClass('lg-zoom-dragging');
if (allowY) {
distanceY = (-Math.abs(_$el.attr('data-y'))) + ((endCoords.y - startCoords.y) * _this.getModifier(rotateValue, 'Y', rotateEl));
} else {
distanceY = -Math.abs(_$el.attr('data-y'));
}
if (allowX) {
distanceX = (-Math.abs(_$el.attr('data-x'))) + ((endCoords.x - startCoords.x) * _this.getModifier(rotateValue, 'X', rotateEl));
} else {
distanceX = -Math.abs(_$el.attr('data-x'));
}
if ((Math.abs(endCoords.x - startCoords.x) > 15) || (Math.abs(endCoords.y - startCoords.y) > 15)) {
if (_this.core.s.useLeftForZoom) {
_$el.css({
left: distanceX + 'px',
top: distanceY + 'px'
});
} else {
_$el.css('transform', 'translate3d(' + distanceX + 'px, ' + distanceY + 'px, 0)');
}
}
}
});
_this.core.$slide.on('touchend.lg', function() {
if (_this.core.$outer.hasClass('lg-zoomed')) {
if (isMoved) {
isMoved = false;
_this.core.$outer.removeClass('lg-zoom-dragging');
_this.touchendZoom(startCoords, endCoords, allowX, allowY, rotateValue);
}
}
});
};
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;
var rotateValue = 0;
var rotateEl;
_this.core.$slide.on('mousedown.lg.zoom', function(e) {
rotateEl = _this.core.$slide.eq(_this.core.index).find('.lg-img-rotate')[0];
rotateValue = _this.getCurrentRotation(rotateEl);
// execute only on .lg-object
var $image = _this.core.$slide.eq(_this.core.index).find('.lg-object');
var dragAllowedAxises = _this.getDragAllowedAxises($image, Math.abs(rotateValue));
allowY = dragAllowedAxises.allowY;
allowX = dragAllowedAxises.allowX;
if (_this.core.$outer.hasClass('lg-zoomed')) {
if ($(e.target).hasClass('lg-object') && (allowX || allowY)) {
e.preventDefault();
startCoords = _this.getDragCords(e, Math.abs(rotateValue));
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;
_this.core.$outer.removeClass('lg-grab').addClass('lg-grabbing');
}
}
});
$(window).on('mousemove.lg.zoom', function(e) {
if (isDraging) {
var _$el = _this.core.$slide.eq(_this.core.index).find('.lg-img-wrap');
var distanceX;
var distanceY;
isMoved = true;
endCoords = _this.getDragCords(e, Math.abs(rotateValue));
// reset opacity and transition duration
_this.core.$outer.addClass('lg-zoom-dragging');
if (allowY) {
distanceY = (-Math.abs(_$el.attr('data-y'))) + ((endCoords.y - startCoords.y) * _this.getModifier(rotateValue, 'Y', rotateEl));
} else {
distanceY = -Math.abs(_$el.attr('data-y'));
}
if (allowX) {
distanceX = (-Math.abs(_$el.attr('data-x'))) + ((endCoords.x - startCoords.x) * _this.getModifier(rotateValue, 'X', rotateEl));
} else {
distanceX = -Math.abs(_$el.attr('data-x'));
}
if (_this.core.s.useLeftForZoom) {
_$el.css({
left: distanceX + 'px',
top: distanceY + 'px'
});
} else {
_$el.css('transform', 'translate3d(' + distanceX + 'px, ' + distanceY + 'px, 0)');
}
}
});
$(window).on('mouseup.lg.zoom', function(e) {
if (isDraging) {
isDraging = false;
_this.core.$outer.removeClass('lg-zoom-dragging');
// Fix for chrome mouse move on click
if (isMoved && ((startCoords.x !== endCoords.x) || (startCoords.y !== endCoords.y))) {
endCoords = _this.getDragCords(e, Math.abs(rotateValue));
_this.touchendZoom(startCoords, endCoords, allowX, allowY, rotateValue);
}
isMoved = false;
}
_this.core.$outer.removeClass('lg-grabbing').addClass('lg-grab');
});
};
Zoom.prototype.touchendZoom = function(startCoords, endCoords, allowX, allowY, rotateValue) {
var _this = this;
var _$el = _this.core.$slide.eq(_this.core.index).find('.lg-img-wrap');
var $image = _this.core.$slide.eq(_this.core.index).find('.lg-object');
var rotateEl = _this.core.$slide.eq(_this.core.index).find('.lg-img-rotate')[0];
var distanceX = (-Math.abs(_$el.attr('data-x'))) + ((endCoords.x - startCoords.x) * _this.getModifier(rotateValue, 'X', rotateEl));
var distanceY = (-Math.abs(_$el.attr('data-y'))) + ((endCoords.y - startCoords.y) * _this.getModifier(rotateValue, 'Y', rotateEl));
var possibleDragCords = _this.getPossibleDragCords($image, Math.abs(rotateValue));
if ((Math.abs(endCoords.x - startCoords.x) > 15) || (Math.abs(endCoords.y - startCoords.y) > 15)) {
if (allowY) {
if (distanceY <= -possibleDragCords.maxY) {
distanceY = -possibleDragCords.maxY;
} else if (distanceY >= -possibleDragCords.minY) {
distanceY = -possibleDragCords.minY;
}
}
if (allowX) {
if (distanceX <= -possibleDragCords.maxX) {
distanceX = -possibleDragCords.maxX;
} else if (distanceX >= -possibleDragCords.minX) {
distanceX = -possibleDragCords.minX;
}
}
if (allowY) {
_$el.attr('data-y', Math.abs(distanceY));
} else {
distanceY = -Math.abs(_$el.attr('data-y'));
}
if (allowX) {
_$el.attr('data-x', Math.abs(distanceX));
} else {
distanceX = -Math.abs(_$el.attr('data-x'));
}
if (_this.core.s.useLeftForZoom) {
_$el.css({
left: distanceX + 'px',
top: distanceY + 'px'
});
} else {
_$el.css('transform', 'translate3d(' + distanceX + 'px, ' + distanceY + 'px, 0)');
}
}
};
Zoom.prototype.destroy = function() {
var _this = this;
// Unbind all events added by lightGallery zoom plugin
_this.core.$el.off('.lg.zoom');
$(window).off('.lg.zoom');
_this.core.$slide.off('.lg.zoom');
_this.core.$el.off('.lg.tm.zoom');
_this.resetZoom();
clearTimeout(_this.zoomabletimeout);
_this.zoomabletimeout = false;
};
$.fn.lightGallery.modules.zoom = Zoom;
})();
}));