568 lines
19 KiB
JavaScript
568 lines
19 KiB
JavaScript
const defaults = {
|
|
albumLabel: 'Image %1 of %2',
|
|
alwaysShowNavOnTouchDevices: false,
|
|
fadeDuration: 600,
|
|
fitImagesInViewport: true,
|
|
imageFadeDuration: 600,
|
|
positionFromTop: 50,
|
|
resizeDuration: 700,
|
|
wrapAround: false,
|
|
disableScrolling: false,
|
|
sanitizeTitle: false,
|
|
hasVideo: true,
|
|
onMediaChange: () => {},
|
|
onClosing: () => {}
|
|
};
|
|
|
|
class Lightbox {
|
|
constructor() {
|
|
this.album = [];
|
|
this.currentImageIndex = 0;
|
|
this.options = { ...defaults };
|
|
this.gMouseDownOffsetX = 0;
|
|
this.gMouseDownOffsetY = 0;
|
|
this.resizeTimer = null;
|
|
this.boundOnBodyClick = this.onBodyClick.bind(this);
|
|
this.boundOnResize = this.sizeOverlay.bind(this);
|
|
this.boundOnKeyUp = this.keyboardAction.bind(this);
|
|
this.boundOnWheel = this.onWheel.bind(this);
|
|
this.boundOnDragStart = this.onDragStart.bind(this);
|
|
this.boundOnDragMove = this.onDragMove.bind(this);
|
|
this.boundOnDragEnd = this.onDragEnd.bind(this);
|
|
this.init();
|
|
}
|
|
|
|
option(options = {}) {
|
|
Object.assign(this.options, options);
|
|
}
|
|
|
|
init() {
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
this.enable();
|
|
this.build();
|
|
}, { once: true });
|
|
} else {
|
|
this.enable();
|
|
this.build();
|
|
}
|
|
}
|
|
|
|
enable() {
|
|
document.body.addEventListener('click', this.boundOnBodyClick);
|
|
}
|
|
|
|
onBodyClick(event) {
|
|
const link = event.target.closest('a[rel^="lightbox"], area[rel^="lightbox"], a[data-lightbox], area[data-lightbox]');
|
|
if (!link) return;
|
|
event.preventDefault();
|
|
this.start(link);
|
|
}
|
|
|
|
build() {
|
|
if (document.getElementById('lightbox')) return;
|
|
|
|
const wrapper = document.createElement('div');
|
|
wrapper.innerHTML = `
|
|
<div id="lightboxOverlay" tabindex="-1" class="lightboxOverlay"></div>
|
|
<div id="lightbox" tabindex="-1" class="lightbox">
|
|
<div class="lb-outerContainer">
|
|
<div class="lb-container">
|
|
<img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="" />
|
|
<div class="lb-nav">
|
|
<div class="lb-prev-area">
|
|
<a class="lb-prev" aria-label="Previous image" href="" role="button"></a>
|
|
</div>
|
|
<div class="lb-next-area">
|
|
<a class="lb-next" aria-label="Next image" href="" role="button"></a>
|
|
</div>
|
|
</div>
|
|
<div class="lb-loader">
|
|
<a class="lb-cancel" href="#"></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="lb-dataContainer desktop">
|
|
<div class="lb-data">
|
|
<div class="lb-details">
|
|
<span class="lb-caption"></span>
|
|
</div>
|
|
<div class="lb-closeContainer">
|
|
<a class="lb-close" role="button"></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
document.body.append(...wrapper.children);
|
|
|
|
this.overlay = document.getElementById('lightboxOverlay');
|
|
this.lightbox = document.getElementById('lightbox');
|
|
this.outerContainer = this.lightbox.querySelector('.lb-outerContainer');
|
|
this.container = this.lightbox.querySelector('.lb-container');
|
|
this.image = this.lightbox.querySelector('.lb-image');
|
|
this.nav = this.lightbox.querySelector('.lb-nav');
|
|
this.loader = this.lightbox.querySelector('.lb-loader');
|
|
this.caption = this.lightbox.querySelector('.lb-caption');
|
|
this.closeButton = this.lightbox.querySelector('.lb-close');
|
|
this.dataContainer = this.lightbox.querySelector('.lb-dataContainer');
|
|
this.prev = this.lightbox.querySelector('.lb-prev');
|
|
this.next = this.lightbox.querySelector('.lb-next');
|
|
this.video = document.createElement('video');
|
|
this.video.className = 'lb-video';
|
|
this.video.controls = true;
|
|
this.video.autoplay = true;
|
|
this.image.insertAdjacentElement('afterend', this.video);
|
|
|
|
this.overlay.style.display = 'none';
|
|
this.lightbox.style.display = 'none';
|
|
|
|
this.containerPadding = this.getBoxMetrics(this.container, 'padding');
|
|
this.imageBorderWidth = this.getBoxMetrics(this.image, 'border');
|
|
this.videoBorderWidth = this.getBoxMetrics(this.video, 'border');
|
|
|
|
this.overlay.addEventListener('click', () => this.end());
|
|
this.dataContainer.addEventListener('click', () => this.end());
|
|
this.lightbox.addEventListener('click', (event) => {
|
|
if (event.target === this.lightbox) this.end();
|
|
});
|
|
this.outerContainer.addEventListener('click', (event) => {
|
|
if (event.target === this.outerContainer) this.end();
|
|
event.stopPropagation();
|
|
});
|
|
|
|
this.prev.addEventListener('click', (event) => {
|
|
event.preventDefault();
|
|
if (this.currentImageIndex === 0) this.changeImage(this.album.length - 1);
|
|
else this.changeImage(this.currentImageIndex - 1);
|
|
});
|
|
this.next.addEventListener('click', (event) => {
|
|
event.preventDefault();
|
|
if (this.currentImageIndex === this.album.length - 1) this.changeImage(0);
|
|
else this.changeImage(this.currentImageIndex + 1);
|
|
});
|
|
|
|
this.loader.addEventListener('click', (event) => {
|
|
event.preventDefault();
|
|
this.end();
|
|
});
|
|
this.closeButton.addEventListener('click', (event) => {
|
|
event.preventDefault();
|
|
this.end();
|
|
});
|
|
this.closeButton.addEventListener('keyup', (event) => {
|
|
if (event.key === 'Enter' || event.key === ' ') this.end();
|
|
});
|
|
|
|
this.nav.addEventListener('wheel', this.boundOnWheel, { passive: false });
|
|
this.nav.addEventListener('mousedown', this.boundOnDragStart);
|
|
window.addEventListener('mouseup', this.boundOnDragEnd);
|
|
}
|
|
|
|
getBoxMetrics(element, type) {
|
|
const styles = getComputedStyle(element);
|
|
return {
|
|
top: parseInt(styles[`${type}-top-width`], 10) || 0,
|
|
right: parseInt(styles[`${type}-right-width`], 10) || 0,
|
|
bottom: parseInt(styles[`${type}-bottom-width`], 10) || 0,
|
|
left: parseInt(styles[`${type}-left-width`], 10) || 0
|
|
};
|
|
}
|
|
|
|
start(link) {
|
|
this.sizeOverlay();
|
|
this.album = [];
|
|
let imageNumber = 0;
|
|
const setName = link.getAttribute('data-lightbox');
|
|
|
|
if (setName) {
|
|
const links = [...document.querySelectorAll(`${link.tagName}[data-lightbox="${CSS.escape(setName)}"]`)];
|
|
links.forEach((item, index) => {
|
|
this.addToAlbum(item);
|
|
if (item === link) imageNumber = index;
|
|
});
|
|
} else if (link.getAttribute('rel') === 'lightbox') {
|
|
this.addToAlbum(link);
|
|
} else {
|
|
const rel = link.getAttribute('rel');
|
|
const links = [...document.querySelectorAll(`${link.tagName}[rel="${CSS.escape(rel)}"]`)];
|
|
links.forEach((item, index) => {
|
|
this.addToAlbum(item);
|
|
if (item === link) imageNumber = index;
|
|
});
|
|
}
|
|
|
|
this.fade(this.overlay, true, this.options.fadeDuration);
|
|
this.fade(this.lightbox, true, this.options.fadeDuration);
|
|
|
|
if (this.options.disableScrolling) document.body.classList.add('lb-disable-scrolling');
|
|
|
|
window.addEventListener('resize', this.boundOnResize);
|
|
this.changeImage(imageNumber);
|
|
}
|
|
|
|
addToAlbum(link) {
|
|
const img = link.querySelector('img');
|
|
this.album.push({
|
|
alt: link.getAttribute('data-alt') || '',
|
|
link: link.getAttribute('href'),
|
|
title: link.getAttribute('data-title') || link.getAttribute('title') || '',
|
|
orientation: parseInt(link.getAttribute('data-orientation') || '0', 10),
|
|
type: link.getAttribute('data-type') || 'image',
|
|
id: link.getAttribute('data-id'),
|
|
width: parseInt(img?.getAttribute('width') || '0', 10),
|
|
height: parseInt(img?.getAttribute('height') || '0', 10),
|
|
set: link.getAttribute('data-lightbox') || link.getAttribute('rel') || ''
|
|
});
|
|
}
|
|
|
|
getMaxSizes(mediaWidth, mediaHeight, mediaType) {
|
|
let maxWidth = window.innerWidth - this.containerPadding.left - this.containerPadding.right;
|
|
let maxHeight = window.innerHeight - this.containerPadding.top - this.containerPadding.bottom - this.options.positionFromTop;
|
|
const border = mediaType === 'image' ? this.imageBorderWidth : this.videoBorderWidth;
|
|
maxWidth -= border.left + border.right;
|
|
maxHeight -= border.top + border.bottom;
|
|
|
|
const dataMaxWidth = this.dataContainer.offsetWidth || 0;
|
|
const dataMaxHeight = this.dataContainer.offsetHeight || 0;
|
|
const ratio = mediaWidth / mediaHeight;
|
|
|
|
const heightH = Math.min(maxHeight, mediaHeight);
|
|
const widthH = Math.min(heightH * ratio, maxWidth - dataMaxWidth);
|
|
const surfaceH = Math.min(heightH, widthH / ratio) * widthH;
|
|
|
|
const widthV = Math.min(maxWidth, mediaWidth);
|
|
const heightV = Math.min(widthV / ratio, maxHeight - dataMaxHeight);
|
|
const surfaceV = Math.min(widthV, heightV * ratio) * heightV;
|
|
|
|
const direction = surfaceV > surfaceH ? 'vertical' : 'horizontal';
|
|
if (direction === 'vertical') maxHeight -= dataMaxHeight;
|
|
else maxWidth -= dataMaxWidth;
|
|
|
|
return { maxWidth, maxHeight, direction };
|
|
}
|
|
|
|
updateSize(index) {
|
|
const media = this.album[index];
|
|
const maxSizes = this.getMaxSizes(media.width, media.height, media.type);
|
|
let maxWidth = maxSizes.maxWidth;
|
|
let maxHeight = maxSizes.maxHeight;
|
|
|
|
this.lightbox.classList.remove('vertical', 'horizontal');
|
|
this.lightbox.classList.add(maxSizes.direction);
|
|
|
|
if (this.options.fitImagesInViewport) {
|
|
if (this.options.maxWidth && this.options.maxWidth < maxWidth) maxWidth = this.options.maxWidth;
|
|
if (this.options.maxHeight && this.options.maxHeight < maxHeight) maxHeight = this.options.maxHeight;
|
|
} else {
|
|
maxWidth = this.options.maxWidth || media.width || maxWidth;
|
|
maxHeight = this.options.maxHeight || media.height || maxHeight;
|
|
}
|
|
|
|
let finalWidth;
|
|
let finalHeight;
|
|
if (media.width > maxWidth || media.height > maxHeight) {
|
|
if ((media.width / maxWidth) > (media.height / maxHeight)) {
|
|
finalWidth = maxWidth;
|
|
finalHeight = Math.round(media.height / (media.width / maxWidth));
|
|
} else {
|
|
finalWidth = Math.round(media.width / (media.height / maxHeight));
|
|
finalHeight = maxHeight;
|
|
}
|
|
} else {
|
|
finalWidth = media.width;
|
|
finalHeight = media.height;
|
|
}
|
|
|
|
const target = media.type === 'video' ? this.video : this.image;
|
|
target.width = finalWidth;
|
|
target.height = finalHeight;
|
|
this.sizeContainer(finalWidth, finalHeight, media.type);
|
|
}
|
|
|
|
changeImage(index) {
|
|
const media = this.album[index];
|
|
if (!media) return;
|
|
|
|
this.disableKeyboardNav();
|
|
this.fade(this.overlay, true, this.options.fadeDuration);
|
|
this.fade(this.loader, true, 200);
|
|
this.hideElements([this.image, this.video, this.nav, this.prev, this.next, this.caption, this.closeButton]);
|
|
this.resetImageTransform();
|
|
this.dataContainer.style.width = '200px';
|
|
this.dataContainer.style.height = '30px';
|
|
this.outerContainer.classList.add('animating');
|
|
this.container.classList.remove('moveable', 'moving', 'lb-video-nav');
|
|
|
|
this.options.onMediaChange(media);
|
|
|
|
if (media.type === 'video') {
|
|
this.image.removeAttribute('src');
|
|
this.container.classList.add('lb-video-nav');
|
|
this.video.onloadedmetadata = () => {
|
|
media.width = this.video.videoWidth;
|
|
media.height = this.video.videoHeight;
|
|
this.video.onloadedmetadata = null;
|
|
this.updateSize(index);
|
|
};
|
|
this.video.src = media.link;
|
|
} else {
|
|
this.video.pause();
|
|
this.video.removeAttribute('src');
|
|
this.image.onload = () => {
|
|
this.image.alt = media.alt;
|
|
let width = this.image.naturalWidth;
|
|
let height = this.image.naturalHeight;
|
|
if (Math.abs(media.orientation) === 90 && width > height) {
|
|
const tmp = width;
|
|
width = height;
|
|
height = tmp;
|
|
}
|
|
media.width = width;
|
|
media.height = height;
|
|
this.image.onload = null;
|
|
this.updateSize(index);
|
|
};
|
|
this.image.src = media.link;
|
|
}
|
|
|
|
this.currentImageIndex = index;
|
|
}
|
|
|
|
sizeOverlay() {
|
|
if (this.resizeTimer) clearTimeout(this.resizeTimer);
|
|
if (!this.album.length) return;
|
|
|
|
this.resizeTimer = window.setTimeout(() => {
|
|
const current = this.album[this.currentImageIndex];
|
|
if (!current) return;
|
|
if (current.type === 'image') this.changeImage(this.currentImageIndex);
|
|
else this.updateSize(this.currentImageIndex);
|
|
}, 200);
|
|
}
|
|
|
|
sizeContainer(width, height, mediaType = 'image') {
|
|
const border = mediaType === 'image' ? this.imageBorderWidth : this.videoBorderWidth;
|
|
const newWidth = width + this.containerPadding.left + this.containerPadding.right + border.left + border.right;
|
|
const newHeight = height + this.containerPadding.top + this.containerPadding.bottom + border.top + border.bottom;
|
|
|
|
this.outerContainer.style.transition = `width ${this.options.resizeDuration}ms, height ${this.options.resizeDuration}ms`;
|
|
this.outerContainer.style.width = `${newWidth}px`;
|
|
this.outerContainer.style.height = `${newHeight}px`;
|
|
|
|
window.setTimeout(() => {
|
|
if (this.lightbox.classList.contains('vertical')) this.dataContainer.style.width = `${newWidth}px`;
|
|
else this.dataContainer.style.height = `${newHeight}px`;
|
|
|
|
this.overlay.focus();
|
|
this.showImage();
|
|
this.outerContainer.style.transition = '';
|
|
}, this.options.resizeDuration);
|
|
}
|
|
|
|
showImage() {
|
|
this.fade(this.loader, false, 0);
|
|
if (this.options.hasVideo && this.album[this.currentImageIndex].type === 'video') this.fade(this.video, true, this.options.imageFadeDuration);
|
|
else this.fade(this.image, true, this.options.imageFadeDuration);
|
|
|
|
this.updateNav();
|
|
this.updateDetails();
|
|
this.preloadNeighboringImages();
|
|
this.enableKeyboardNav();
|
|
}
|
|
|
|
updateNav() {
|
|
this.nav.style.display = 'block';
|
|
this.prev.style.display = 'none';
|
|
this.next.style.display = 'none';
|
|
|
|
const alwaysShowNav = ('ontouchstart' in window) && this.options.alwaysShowNavOnTouchDevices;
|
|
if (this.album.length <= 1) return;
|
|
|
|
if (this.options.wrapAround) {
|
|
this.prev.style.display = '';
|
|
this.next.style.display = '';
|
|
} else {
|
|
if (this.currentImageIndex > 0) this.prev.style.display = '';
|
|
if (this.currentImageIndex < this.album.length - 1) this.next.style.display = '';
|
|
}
|
|
|
|
if (alwaysShowNav) {
|
|
this.prev.style.opacity = '1';
|
|
this.next.style.opacity = '1';
|
|
} else {
|
|
this.prev.style.opacity = '';
|
|
this.next.style.opacity = '';
|
|
}
|
|
}
|
|
|
|
updateDetails() {
|
|
const media = this.album[this.currentImageIndex];
|
|
if (!media) return;
|
|
|
|
if (media.title) {
|
|
if (this.options.sanitizeTitle) this.caption.textContent = media.title;
|
|
else this.caption.innerHTML = media.title;
|
|
this.fade(this.caption, true, 200);
|
|
this.fade(this.closeButton, true, 200);
|
|
} else {
|
|
this.caption.textContent = '';
|
|
this.caption.style.display = 'none';
|
|
}
|
|
|
|
this.outerContainer.classList.remove('animating');
|
|
this.fade(this.dataContainer, true, this.options.resizeDuration);
|
|
}
|
|
|
|
preloadNeighboringImages() {
|
|
const next = this.album[this.currentImageIndex + 1];
|
|
const prev = this.album[this.currentImageIndex - 1];
|
|
if (next && next.type === 'image') {
|
|
const preloadNext = new Image();
|
|
preloadNext.src = next.link;
|
|
}
|
|
if (prev && prev.type === 'image') {
|
|
const preloadPrev = new Image();
|
|
preloadPrev.src = prev.link;
|
|
}
|
|
}
|
|
|
|
enableKeyboardNav() {
|
|
this.disableKeyboardNav();
|
|
this.lightbox.addEventListener('keyup', this.boundOnKeyUp);
|
|
this.overlay.addEventListener('keyup', this.boundOnKeyUp);
|
|
}
|
|
|
|
disableKeyboardNav() {
|
|
this.lightbox?.removeEventListener('keyup', this.boundOnKeyUp);
|
|
this.overlay?.removeEventListener('keyup', this.boundOnKeyUp);
|
|
}
|
|
|
|
keyboardAction(event) {
|
|
switch (event.key) {
|
|
case 'Escape':
|
|
event.stopPropagation();
|
|
this.end();
|
|
break;
|
|
case 'ArrowLeft':
|
|
if (this.currentImageIndex !== 0) this.changeImage(this.currentImageIndex - 1);
|
|
else if (this.options.wrapAround && this.album.length > 1) this.changeImage(this.album.length - 1);
|
|
break;
|
|
case 'ArrowRight':
|
|
if (this.currentImageIndex !== this.album.length - 1) this.changeImage(this.currentImageIndex + 1);
|
|
else if (this.options.wrapAround && this.album.length > 1) this.changeImage(0);
|
|
break;
|
|
}
|
|
}
|
|
|
|
onWheel(event) {
|
|
const media = this.album[this.currentImageIndex];
|
|
if (!media || media.type === 'video') return;
|
|
event.preventDefault();
|
|
|
|
const rect = this.image.getBoundingClientRect();
|
|
const oldZoom = parseFloat(this.image.style.getPropertyValue('--scale') || '1');
|
|
const oldTranslateX = parseFloat(this.image.style.getPropertyValue('--translate-x') || '0');
|
|
const oldTranslateY = parseFloat(this.image.style.getPropertyValue('--translate-y') || '0');
|
|
const maxZoom = Math.max(media.width / Math.max(this.image.width, 1), media.height / Math.max(this.image.height, 1), 1);
|
|
const newZoom = Math.min(Math.max(oldZoom + (-Math.sign(event.deltaY) / 10), 1), maxZoom);
|
|
|
|
const offsetX = event.clientX - rect.left;
|
|
const offsetY = event.clientY - rect.top;
|
|
let translateX = oldTranslateX + (newZoom - oldZoom) * ((this.image.width / 2) - offsetX);
|
|
let translateY = oldTranslateY + (newZoom - oldZoom) * ((this.image.height / 2) - offsetY);
|
|
const maxTranslateX = (newZoom - 1) * this.image.width / 2;
|
|
const maxTranslateY = (newZoom - 1) * this.image.height / 2;
|
|
|
|
translateX = Math.max(Math.min(translateX, maxTranslateX), -maxTranslateX);
|
|
translateY = Math.max(Math.min(translateY, maxTranslateY), -maxTranslateY);
|
|
|
|
this.container.classList.toggle('moveable', newZoom > 1);
|
|
this.image.style.setProperty('--scale', String(newZoom));
|
|
this.image.style.setProperty('--translate-x', `${translateX}px`);
|
|
this.image.style.setProperty('--translate-y', `${translateY}px`);
|
|
}
|
|
|
|
onDragStart(event) {
|
|
const scale = parseFloat(this.image.style.getPropertyValue('--scale') || '1');
|
|
if (scale <= 1) return;
|
|
|
|
this.gMouseDownOffsetX = event.clientX - parseFloat(this.image.style.getPropertyValue('--translate-x') || '0');
|
|
this.gMouseDownOffsetY = event.clientY - parseFloat(this.image.style.getPropertyValue('--translate-y') || '0');
|
|
this.container.classList.add('moving');
|
|
window.addEventListener('mousemove', this.boundOnDragMove);
|
|
}
|
|
|
|
onDragMove(event) {
|
|
const zoom = parseFloat(this.image.style.getPropertyValue('--scale') || '1');
|
|
let translateX = event.clientX - this.gMouseDownOffsetX;
|
|
let translateY = event.clientY - this.gMouseDownOffsetY;
|
|
const maxTranslateX = (zoom - 1) * this.image.width / 2;
|
|
const maxTranslateY = (zoom - 1) * this.image.height / 2;
|
|
|
|
translateX = Math.max(Math.min(translateX, maxTranslateX), -maxTranslateX);
|
|
translateY = Math.max(Math.min(translateY, maxTranslateY), -maxTranslateY);
|
|
|
|
this.image.style.setProperty('--translate-x', `${translateX}px`);
|
|
this.image.style.setProperty('--translate-y', `${translateY}px`);
|
|
}
|
|
|
|
onDragEnd() {
|
|
window.removeEventListener('mousemove', this.boundOnDragMove);
|
|
this.container?.classList.remove('moving');
|
|
}
|
|
|
|
resetImageTransform() {
|
|
this.image.style.setProperty('--scale', '1');
|
|
this.image.style.setProperty('--translate-x', '0px');
|
|
this.image.style.setProperty('--translate-y', '0px');
|
|
}
|
|
|
|
hideElements(elements) {
|
|
elements.forEach((element) => {
|
|
if (element) element.style.display = 'none';
|
|
});
|
|
}
|
|
|
|
fade(element, show, duration, done) {
|
|
if (!element) return;
|
|
|
|
const safeDuration = duration || 0;
|
|
element.style.transition = `opacity ${safeDuration}ms`;
|
|
if (show) {
|
|
element.style.display = element === this.lightbox ? 'flex' : 'block';
|
|
requestAnimationFrame(() => {
|
|
element.style.opacity = element === this.overlay ? '0.8' : '1';
|
|
});
|
|
} else {
|
|
element.style.opacity = '0';
|
|
window.setTimeout(() => {
|
|
element.style.display = 'none';
|
|
}, safeDuration);
|
|
}
|
|
|
|
if (typeof done === 'function') {
|
|
window.setTimeout(done, safeDuration);
|
|
}
|
|
}
|
|
|
|
end() {
|
|
this.disableKeyboardNav();
|
|
this.video.pause();
|
|
this.video.removeAttribute('src');
|
|
this.container.classList.remove('lb-video-nav', 'moveable', 'moving');
|
|
window.removeEventListener('resize', this.boundOnResize);
|
|
window.removeEventListener('mousemove', this.boundOnDragMove);
|
|
this.fade(this.lightbox, false, this.options.fadeDuration);
|
|
this.fade(this.overlay, false, this.options.fadeDuration);
|
|
|
|
if (this.options.disableScrolling) document.body.classList.remove('lb-disable-scrolling');
|
|
this.options.onClosing();
|
|
}
|
|
}
|
|
|
|
const lightbox = new Lightbox();
|
|
|
|
export const options = defaults;
|
|
export default lightbox;
|