From 955f98babcf7f1574d2767f2a55c415de581ceed Mon Sep 17 00:00:00 2001 From: leo Date: Sun, 15 Sep 2024 19:46:49 +0200 Subject: [PATCH 1/6] add mp4 as "Image" --- classes/Image.php | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/classes/Image.php b/classes/Image.php index 079efe1..416593d 100644 --- a/classes/Image.php +++ b/classes/Image.php @@ -6,7 +6,7 @@ class Image { - public const IMG_REGEX = '/\.(jpe?g|gif|png|svg|webp)$/i'; + public const IMG_REGEX = '/\.(jpe?g|gif|png|svg|webpi|mp4)$/i'; protected $isExternal = false; protected $src; @@ -19,6 +19,7 @@ class Image protected $created = 0; protected $modified = 0; protected $detaillink; + public $imagetype; /** @@ -45,6 +46,8 @@ public function __construct($src) $this->width = $jpegMeta->getField('File.Width'); $this->height = $jpegMeta->getField('File.Height'); } + if (preg_match(self::IMG_REGEX, $this->filename, $match)) + $this->imagetype = $match[1]; } public function isExternal() From 09ddf2775bdbd003d8db0e5702e7653a17f84dcd Mon Sep 17 00:00:00 2001 From: leo Date: Sun, 15 Sep 2024 19:52:42 +0200 Subject: [PATCH 2/6] render videos --- classes/XHTMLFormatter.php | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/classes/XHTMLFormatter.php b/classes/XHTMLFormatter.php index 953481f..3c08ea9 100644 --- a/classes/XHTMLFormatter.php +++ b/classes/XHTMLFormatter.php @@ -141,10 +141,13 @@ protected function renderImage(Image $image) } $html = '
'; - $html .= ''; - $html .= ''; - $html .= ''; - + if ($image->imagetype == 'mp4'){ + $html .= str_replace('width="320" height="240"','',$this->renderer->_video($image->getSrc(),320,240,$a)); + } else { + $html .= ''; + $html .= ''; + $html .= ''; + } if ($this->options->showtitle || $this->options->showname) { $html .= '
'; if ($this->options->showtitle) { From d7a2425f78223e99901a581cda6219f54f43ecd4 Mon Sep 17 00:00:00 2001 From: leo Date: Sun, 15 Sep 2024 19:57:24 +0200 Subject: [PATCH 3/6] styles for videos too --- screen.less | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/screen.less b/screen.less index fabd9a2..99483a9 100644 --- a/screen.less +++ b/screen.less @@ -40,9 +40,10 @@ div.plugin-gallery { justify-content: space-between; overflow: hidden; - img { - max-width: 100%; - height: auto; + img, video { + aspect-ratio: 1/1; + object-fit: cover; + width: 100%; } figcaption { From ba631dc45ffe032bee6d7f5a85d7ebdc2afc0c27 Mon Sep 17 00:00:00 2001 From: leo Date: Sun, 15 Sep 2024 20:01:52 +0200 Subject: [PATCH 4/6] start SimpleLightbox not only on "a" --- script.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/script.js b/script.js index 0ae74ba..c7b7a60 100644 --- a/script.js +++ b/script.js @@ -58,7 +58,7 @@ jQuery(function () { /** * Initialize the lightbox */ - new SimpleLightbox("a.lightbox, a[rel^='lightbox']", { + new SimpleLightbox(".lightbox, [rel^='lightbox']", { sourceAttr: 'data-url', captionSelector: 'self', captionType: 'data', @@ -67,7 +67,8 @@ jQuery(function () { captionHTML: true, // we allow HTML and double escape in the formatter alertError: false, fileExt: false, - uniqueImages: false + uniqueImages: false, + widthRatio: 1.0 }); }); From 1683eea09da118556d6de4743f789f33cc4ad138 Mon Sep 17 00:00:00 2001 From: leo Date: Sun, 15 Sep 2024 20:36:34 +0200 Subject: [PATCH 5/6] js code to handle videos --- simple-lightbox/simple-lightbox.js | 284 +++++++++++++++++------------ 1 file changed, 163 insertions(+), 121 deletions(-) diff --git a/simple-lightbox/simple-lightbox.js b/simple-lightbox/simple-lightbox.js index 280204a..69774fa 100644 --- a/simple-lightbox/simple-lightbox.js +++ b/simple-lightbox/simple-lightbox.js @@ -1,8 +1,8 @@ -/*! - By André Rinas, www.andrerinas.de - Documentation, www.simplelightbox.com - Available for use under the MIT License - Version 2.14.2 +/*! + By André Rinas, www.andrerinas.de + Documentation, www.simplelightbox.com + Available for use under the MIT License + Version 2.14.2 */ (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i= length - 1 ? 0 : index + 1, prev = index - 1 < 0 ? length - 1 : index - 1 >= length - 1 ? 0 : index - 1, - nextImage = new Image(), + nextImage, + prevImage; + if (this.relatedElements[next].nodeName != 'VIDEO'){ + nextImage = new Image(); + nextImage.addEventListener('load', function (event) { + var src = event.target.getAttribute('src'); + if (_this3.loadedImages.indexOf(src) === -1) { + //is this condition even required... setting multiple times will not change usage... + _this3.loadedImages.push(src); + } + _this3.relatedElements[index].dispatchEvent(new Event('nextImageLoaded.' + _this3.eventNamespace)); + }); + nextImage.setAttribute('src', this.relatedElements[next].getAttribute(this.options.sourceAttr)); + } + if (this.relatedElements[prev].nodeName != 'VIDEO'){ prevImage = new Image(); - nextImage.addEventListener('load', function (event) { - var src = event.target.getAttribute('src'); - if (_this3.loadedImages.indexOf(src) === -1) { - //is this condition even required... setting multiple times will not change usage... - _this3.loadedImages.push(src); - } - _this3.relatedElements[index].dispatchEvent(new Event('nextImageLoaded.' + _this3.eventNamespace)); - }); - nextImage.setAttribute('src', this.relatedElements[next].getAttribute(this.options.sourceAttr)); - prevImage.addEventListener('load', function (event) { - var src = event.target.getAttribute('src'); - if (_this3.loadedImages.indexOf(src) === -1) { - _this3.loadedImages.push(src); - } - _this3.relatedElements[index].dispatchEvent(new Event('prevImageLoaded.' + _this3.eventNamespace)); - }); - prevImage.setAttribute('src', this.relatedElements[prev].getAttribute(this.options.sourceAttr)); + prevImage.addEventListener('load', function (event) { + var src = event.target.getAttribute('src'); + if (_this3.loadedImages.indexOf(src) === -1) { + _this3.loadedImages.push(src); + } + _this3.relatedElements[index].dispatchEvent(new Event('prevImageLoaded.' + _this3.eventNamespace)); + }); + prevImage.setAttribute('src', this.relatedElements[prev].getAttribute(this.options.sourceAttr)); + } } }, { key: "loadImage", @@ -519,9 +525,18 @@ var SimpleLightbox = /*#__PURE__*/function () { setTimeout(function () { var element = _this4.relatedElements[_this4.currentImageIndex]; if (!_this4.currentImage) return; - _this4.currentImage.setAttribute('src', element.getAttribute(_this4.options.sourceAttr)); - if (_this4.loadedImages.indexOf(element.getAttribute(_this4.options.sourceAttr)) === -1) { - _this4.show(_this4.domNodes.spinner); + if (!!_this4.currentImage.previousSibling && _this4.currentImage.previousSibling.nodeName == 'VIDEO'){ + _this4.currentImage.previousSibling.remove(); + } + if (element.nodeName == 'VIDEO'){ + var video = element.cloneNode(true); + _this4.currentImage.style.display = 'none'; + _this4.currentImage.parentNode.insertBefore(video,_this4.currentImage); + } else { + _this4.currentImage.setAttribute('src', element.getAttribute(_this4.options.sourceAttr)); + if (_this4.loadedImages.indexOf(element.getAttribute(_this4.options.sourceAttr)) === -1) { + _this4.show(_this4.domNodes.spinner); + } } if (_this4.domNodes.image.contains(_this4.domNodes.caption)) { _this4.domNodes.image.removeChild(_this4.domNodes.caption); @@ -541,122 +556,149 @@ var SimpleLightbox = /*#__PURE__*/function () { if (!this.currentImage) { return false; } - var tmpImage = new Image(), - windowWidth = window.innerWidth * this.options.widthRatio, + var windowWidth = window.innerWidth * this.options.widthRatio, windowHeight = window.innerHeight * this.options.heightRatio; - tmpImage.setAttribute('src', this.currentImage.getAttribute('src')); this.currentImage.dataset.scale = 1; this.currentImage.dataset.translateX = 0; this.currentImage.dataset.translateY = 0; this.zoomPanElement(0, 0, 1); - tmpImage.addEventListener('error', function (event) { - _this5.relatedElements[_this5.currentImageIndex].dispatchEvent(new Event('error.' + _this5.eventNamespace)); - _this5.isAnimating = false; - _this5.isOpen = true; - _this5.domNodes.spinner.style.display = 'none'; - var dirIsDefined = direction === 1 || direction === -1; - if (_this5.initialImageIndex === _this5.currentImageIndex && dirIsDefined) { - return _this5.close(); - } - if (_this5.options.alertError) { - alert(_this5.options.alertErrorMessage); - } - _this5.loadImage(dirIsDefined ? direction : 1); - }); - tmpImage.addEventListener('load', function (event) { - if (typeof direction !== 'undefined') { - _this5.relatedElements[_this5.currentImageIndex].dispatchEvent(new Event('changed.' + _this5.eventNamespace)); - _this5.relatedElements[_this5.currentImageIndex].dispatchEvent(new Event((direction === 1 ? 'nextDone' : 'prevDone') + '.' + _this5.eventNamespace)); - } - - // history - if (_this5.options.history) { - _this5.updateURL(); - } - if (_this5.loadedImages.indexOf(_this5.currentImage.getAttribute('src')) === -1) { - _this5.loadedImages.push(_this5.currentImage.getAttribute('src')); - } - var imageWidth = event.target.width, - imageHeight = event.target.height; - if (_this5.options.scaleImageToRatio || imageWidth > windowWidth || imageHeight > windowHeight) { + if (!!this.currentImage.previousSibling && this.currentImage.previousSibling.nodeName == 'VIDEO'){ + let video = this.currentImage.previousSibling; + var imageHeight = this.elements[this.currentImageIndex].videoHeight; + var imageWidth = this.elements[this.currentImageIndex].videoWidth; + if (this.options.scaleImageToRatio || imageWidth > windowWidth || imageHeight > windowHeight) { var ratio = imageWidth / imageHeight > windowWidth / windowHeight ? imageWidth / windowWidth : imageHeight / windowHeight; imageWidth /= ratio; imageHeight /= ratio; } - _this5.domNodes.image.style.top = (window.innerHeight - imageHeight) / 2 + 'px'; - _this5.domNodes.image.style.left = (window.innerWidth - imageWidth - _this5.globalScrollbarWidth) / 2 + 'px'; - _this5.domNodes.image.style.width = imageWidth + 'px'; - _this5.domNodes.image.style.height = imageHeight + 'px'; - _this5.domNodes.spinner.style.display = 'none'; - if (_this5.options.focus) { - _this5.forceFocus(); + video.style.width = '100%'; + video.style.height = '100%'; + this.domNodes.image.style.transform = 'unset'; + this.domNodes.image.style.transition = 'unset'; + this.domNodes.image.style.top = (window.innerHeight - imageHeight) / 2 + 'px'; + this.domNodes.image.style.left = (window.innerWidth - imageWidth - _this5.globalScrollbarWidth) / 2 + 'px'; + this.domNodes.image.style.width = imageWidth + 'px'; + this.domNodes.image.style.height = imageHeight + 'px'; + // history + if (this.options.history) { + this.updateURL(); } - _this5.fadeIn(_this5.currentImage, _this5.options.fadeSpeed, function () { - if (_this5.options.focus) { - _this5.domNodes.wrapper.focus(); + this.fadeIn(_this5.domNodes.image, _this5.options.fadeSpeed, function () { + _this5.isAnimating = false; + video.play(); + }); + } else { + var tmpImage = new Image(); + tmpImage.setAttribute('src', this.currentImage.getAttribute('src')); + tmpImage.addEventListener('error', function (event) { + _this5.relatedElements[_this5.currentImageIndex].dispatchEvent(new Event('error.' + _this5.eventNamespace)); + _this5.isAnimating = false; + _this5.isOpen = true; + _this5.domNodes.spinner.style.display = 'none'; + var dirIsDefined = direction === 1 || direction === -1; + if (_this5.initialImageIndex === _this5.currentImageIndex && dirIsDefined) { + return _this5.close(); } + if (_this5.options.alertError) { + alert(_this5.options.alertErrorMessage); + } + _this5.loadImage(dirIsDefined ? direction : 1); }); - _this5.isOpen = true; - var captionContainer, captionText; - if (typeof _this5.options.captionSelector === 'string') { - captionContainer = _this5.options.captionSelector === 'self' ? _this5.relatedElements[_this5.currentImageIndex] : _this5.getCaptionElement(_this5.relatedElements[_this5.currentImageIndex]); - } else if (typeof _this5.options.captionSelector === 'function') { - captionContainer = _this5.options.captionSelector(_this5.relatedElements[_this5.currentImageIndex]); - } - if (_this5.options.captions && captionContainer) { - if (_this5.options.captionType === 'data') { - captionText = captionContainer.dataset[_this5.options.captionsData]; - } else if (_this5.options.captionType === 'text') { - captionText = captionContainer.innerHTML; - } else { - captionText = captionContainer.getAttribute(_this5.options.captionsData); + tmpImage.addEventListener('load', function (event) { + if (typeof direction !== 'undefined') { + _this5.relatedElements[_this5.currentImageIndex].dispatchEvent(new Event('changed.' + _this5.eventNamespace)); + _this5.relatedElements[_this5.currentImageIndex].dispatchEvent(new Event((direction === 1 ? 'nextDone' : 'prevDone') + '.' + _this5.eventNamespace)); } - } - if (!_this5.options.loop) { - if (_this5.currentImageIndex === 0) { - _this5.hide(_this5.domNodes.navigation.querySelector('.sl-prev')); + + // history + if (_this5.options.history) { + _this5.updateURL(); } - if (_this5.currentImageIndex >= _this5.relatedElements.length - 1) { - _this5.hide(_this5.domNodes.navigation.querySelector('.sl-next')); + if (_this5.loadedImages.indexOf(_this5.currentImage.getAttribute('src')) === -1) { + _this5.loadedImages.push(_this5.currentImage.getAttribute('src')); } - if (_this5.currentImageIndex > 0) { - _this5.show(_this5.domNodes.navigation.querySelector('.sl-prev')); + var imageWidth = event.target.width, + imageHeight = event.target.height; + if (_this5.options.scaleImageToRatio || imageWidth > windowWidth || imageHeight > windowHeight) { + var ratio = imageWidth / imageHeight > windowWidth / windowHeight ? imageWidth / windowWidth : imageHeight / windowHeight; + imageWidth /= ratio; + imageHeight /= ratio; } - if (_this5.currentImageIndex < _this5.relatedElements.length - 1) { - _this5.show(_this5.domNodes.navigation.querySelector('.sl-next')); + _this5.domNodes.image.style.top = (window.innerHeight - imageHeight) / 2 + 'px'; + _this5.domNodes.image.style.left = (window.innerWidth - imageWidth - _this5.globalScrollbarWidth) / 2 + 'px'; + _this5.domNodes.image.style.width = imageWidth + 'px'; + _this5.domNodes.image.style.height = imageHeight + 'px'; + _this5.domNodes.spinner.style.display = 'none'; + if (_this5.options.focus) { + _this5.forceFocus(); } - } else { - if (_this5.relatedElements.length === 1) { - _this5.hide(_this5.domNodes.navigation.querySelectorAll('.sl-prev, .sl-next')); - } else { - _this5.show(_this5.domNodes.navigation.querySelectorAll('.sl-prev, .sl-next')); + _this5.fadeIn(_this5.currentImage, _this5.options.fadeSpeed, function () { + if (_this5.options.focus) { + _this5.domNodes.wrapper.focus(); + } + }); + _this5.isOpen = true; + var captionContainer, captionText; + if (typeof _this5.options.captionSelector === 'string') { + captionContainer = _this5.options.captionSelector === 'self' ? _this5.relatedElements[_this5.currentImageIndex] : _this5.getCaptionElement(_this5.relatedElements[_this5.currentImageIndex]); + } else if (typeof _this5.options.captionSelector === 'function') { + captionContainer = _this5.options.captionSelector(_this5.relatedElements[_this5.currentImageIndex]); } - } - if (direction === 1 || direction === -1) { - if (_this5.options.animationSlide) { - _this5.slide(0, 100 * direction + 'px'); - setTimeout(function () { - _this5.slide(_this5.options.animationSpeed / 1000, 0 + 'px'); - }, 50); + if (_this5.options.captions && captionContainer) { + if (_this5.options.captionType === 'data') { + captionText = captionContainer.dataset[_this5.options.captionsData]; + } else if (_this5.options.captionType === 'text') { + captionText = captionContainer.innerHTML; + } else { + captionText = captionContainer.getAttribute(_this5.options.captionsData); + } + } + if (!_this5.options.loop) { + if (_this5.currentImageIndex === 0) { + _this5.hide(_this5.domNodes.navigation.querySelector('.sl-prev')); + } + if (_this5.currentImageIndex >= _this5.relatedElements.length - 1) { + _this5.hide(_this5.domNodes.navigation.querySelector('.sl-next')); + } + if (_this5.currentImageIndex > 0) { + _this5.show(_this5.domNodes.navigation.querySelector('.sl-prev')); + } + if (_this5.currentImageIndex < _this5.relatedElements.length - 1) { + _this5.show(_this5.domNodes.navigation.querySelector('.sl-next')); + } + } else { + if (_this5.relatedElements.length === 1) { + _this5.hide(_this5.domNodes.navigation.querySelectorAll('.sl-prev, .sl-next')); + } else { + _this5.show(_this5.domNodes.navigation.querySelectorAll('.sl-prev, .sl-next')); + } } - _this5.fadeIn(_this5.domNodes.image, _this5.options.fadeSpeed, function () { + if (direction === 1 || direction === -1) { + if (_this5.options.animationSlide) { + _this5.slide(0, 100 * direction + 'px'); + setTimeout(function () { + _this5.slide(_this5.options.animationSpeed / 1000, 0 + 'px'); + }, 50); + } + _this5.fadeIn(_this5.domNodes.image, _this5.options.fadeSpeed, function () { + _this5.isAnimating = false; + _this5.setCaption(captionText, imageWidth); + }); + } else { _this5.isAnimating = false; _this5.setCaption(captionText, imageWidth); - }); - } else { - _this5.isAnimating = false; - _this5.setCaption(captionText, imageWidth); - } - if (_this5.options.additionalHtml && !_this5.domNodes.additionalHtml) { - _this5.domNodes.additionalHtml = document.createElement('div'); - _this5.domNodes.additionalHtml.classList.add('sl-additional-html'); - _this5.domNodes.additionalHtml.innerHTML = _this5.options.additionalHtml; - _this5.domNodes.image.appendChild(_this5.domNodes.additionalHtml); - } - if (_this5.options.download) { - _this5.domNodes.downloadLink.setAttribute('href', _this5.currentImage.getAttribute('src')); - } - }); + } + if (_this5.options.additionalHtml && !_this5.domNodes.additionalHtml) { + _this5.domNodes.additionalHtml = document.createElement('div'); + _this5.domNodes.additionalHtml.classList.add('sl-additional-html'); + _this5.domNodes.additionalHtml.innerHTML = _this5.options.additionalHtml; + _this5.domNodes.image.appendChild(_this5.domNodes.additionalHtml); + } + if (_this5.options.download) { + _this5.domNodes.downloadLink.setAttribute('href', _this5.currentImage.getAttribute('src')); + } + }); + } } }, { key: "zoomPanElement", From cb1a9405172ccb2bea40fa3a8eed427ea6c5b41b Mon Sep 17 00:00:00 2001 From: leo Date: Tue, 17 Sep 2024 22:21:39 +0200 Subject: [PATCH 6/6] add code to support starting the slideshow with a video --- simple-lightbox/simple-lightbox.js | 29 ++++++++++++++++++++++++----- 1 file changed, 24 insertions(+), 5 deletions(-) diff --git a/simple-lightbox/simple-lightbox.js b/simple-lightbox/simple-lightbox.js index 69774fa..f4cc485 100644 --- a/simple-lightbox/simple-lightbox.js +++ b/simple-lightbox/simple-lightbox.js @@ -192,6 +192,17 @@ var SimpleLightbox = /*#__PURE__*/function () { _this.openImage(event.currentTarget); } }); + this.addEventListener(this.elements, 'play.' + this.eventNamespace, function (event) { + if (_this.isValidLink(event.currentTarget)) { + event.preventDefault(); + if (_this.isAnimating) { + return false; + } + this.pause(); + _this.initialImageIndex = _this.elements.indexOf(event.currentTarget); + _this.openImage(event.currentTarget); + } + }); // close addEventListener click addEventListener doc if (this.options.docClose) { @@ -530,6 +541,7 @@ var SimpleLightbox = /*#__PURE__*/function () { } if (element.nodeName == 'VIDEO'){ var video = element.cloneNode(true); + video.onplay = null; _this4.currentImage.style.display = 'none'; _this4.currentImage.parentNode.insertBefore(video,_this4.currentImage); } else { @@ -586,6 +598,7 @@ var SimpleLightbox = /*#__PURE__*/function () { this.fadeIn(_this5.domNodes.image, _this5.options.fadeSpeed, function () { _this5.isAnimating = false; video.play(); + _this5.isOpen = true; }); } else { var tmpImage = new Image(); @@ -1208,14 +1221,20 @@ var SimpleLightbox = /*#__PURE__*/function () { var targetURL = element.getAttribute(this.options.sourceAttr); this.currentImage = document.createElement('img'); this.currentImage.style.display = 'none'; - this.currentImage.setAttribute('src', targetURL); + this.domNodes.image.innerHTML = ''; + if (element.nodeName == 'VIDEO'){ + var video = element.cloneNode(true); + video.onplay = null; + this.domNodes.image.appendChild(video); + } else { + this.currentImage.setAttribute('src', targetURL); + if (this.loadedImages.indexOf(targetURL) === -1) { + this.loadedImages.push(targetURL); + } + } this.currentImage.dataset.scale = 1; this.currentImage.dataset.translateX = 0; this.currentImage.dataset.translateY = 0; - if (this.loadedImages.indexOf(targetURL) === -1) { - this.loadedImages.push(targetURL); - } - this.domNodes.image.innerHTML = ''; this.domNodes.image.setAttribute('style', ''); this.domNodes.image.appendChild(this.currentImage); this.fadeIn(this.domNodes.overlay, this.options.fadeSpeed);