From f5ffea4038f037022120038a736efb82a649b1ba Mon Sep 17 00:00:00 2001 From: Jon Uhlmann Date: Sun, 24 Apr 2016 21:56:01 +0200 Subject: [PATCH] Background opacity and some bugfixes --- Configuration/Settings.yaml | 1 + Resources/Private/Javascripts/PhotoSwipe.js | 39 +++++++++---------- .../Private/Styles/PhotoSwipe-Light.scss | 4 +- .../Templates/TypoScriptObjects/Markup.html | 10 ++--- Resources/Public/Main.js | 5 +-- Resources/Public/PhotoSwipe-Light.css | 2 +- composer.json | 2 +- package.json | 2 +- 8 files changed, 30 insertions(+), 35 deletions(-) diff --git a/Configuration/Settings.yaml b/Configuration/Settings.yaml index 0678b2c..36bde47 100644 --- a/Configuration/Settings.yaml +++ b/Configuration/Settings.yaml @@ -13,6 +13,7 @@ Jonnitto: includeJavascript: TRUE includeCSS: Dark # Light / Dark / FALSE preloaderMarkup: '
' + bgOpacity: 0.8 show: topbar: TRUE counter: TRUE diff --git a/Resources/Private/Javascripts/PhotoSwipe.js b/Resources/Private/Javascripts/PhotoSwipe.js index e1eec4a..4540914 100644 --- a/Resources/Private/Javascripts/PhotoSwipe.js +++ b/Resources/Private/Javascripts/PhotoSwipe.js @@ -4,37 +4,36 @@ var PhotoSwipeUI = require('photoswipe/dist/photoswipe-ui-default.js'); window.initPhotoSwipeFromDOM = function(gallerySelector) { var lightboxSelector = '.lightbox'; var parseThumbnailElements = function(el) { - var thumbElements = el.querySelectorAll(lightboxSelector); - var numNodes = thumbElements.length; + var lighboxElements = el.querySelectorAll(lightboxSelector); + var numNodes = lighboxElements.length; var items = []; - var figureEl; - var linkEl; + var element; var size; var item; + var image; var figcaption; for (var i = 0; i < numNodes; i++) { - linkEl = thumbElements[i]; - size = linkEl.getAttribute('data-size').split('x'); + element = lighboxElements[i]; + size = element.getAttribute('data-size').split('x'); item = { - src: linkEl.getAttribute('href'), + src: element.getAttribute('href'), w: parseInt(size[0], 10), h: parseInt(size[1], 10) }; - figureEl = linkEl.parentNode; + figcaption = element.parentNode.querySelector('figcaption'); + image = element.querySelector('img'); - if (figureEl.children.length > 1) { - figcaption = figureEl.children[1]; + if (figcaption) { item.title = figcaption.innerText || figcaption.textContent || false; } - if (linkEl.children.length > 0) { - // thumbnail element, retrieving thumbnail url - item.msrc = linkEl.children[0].getAttribute('src'); + if (image) { + item.msrc = image.getAttribute('src'); } - item.el = figureEl; // save link to element for getThumbBoundsFn - items.push(item); + item.el = element; + items[items.length] = item; } return items; @@ -77,9 +76,7 @@ window.initPhotoSwipeFromDOM = function(gallerySelector) { } if (index >= 0) { - // open PhotoSwipe if valid index found openPhotoSwipe(index, clickedGallery); - } return false; }; @@ -113,15 +110,15 @@ window.initPhotoSwipeFromDOM = function(gallerySelector) { }; var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) { - var pswpElement = document.querySelectorAll('.pswp')[0]; + var pswpElement = document.getElementById('pswp'); + var opacity = pswpElement.getAttribute('data-opacity'); var gallery; var options; - var items; - - items = parseThumbnailElements(galleryElement); + var items = parseThumbnailElements(galleryElement); // define options (if needed) options = { + bgOpacity: opacity ? parseFloat(opacity) : 0, // define gallery index (for URL) galleryUID: galleryElement.getAttribute('data-pswp-uid'), diff --git a/Resources/Private/Styles/PhotoSwipe-Light.scss b/Resources/Private/Styles/PhotoSwipe-Light.scss index 81b87dd..945ba68 100644 --- a/Resources/Private/Styles/PhotoSwipe-Light.scss +++ b/Resources/Private/Styles/PhotoSwipe-Light.scss @@ -1,7 +1,9 @@ $pswp__background-color: #fff; $pswp__placeholder-color: #fff; $pswp__template-filemame: light-skin; - +$pswp__counter-color: #000; +$pswp__caption-small-color: #222; +$pswp__caption-color: #333; @import 'main'; @import 'default-skin/default-skin'; diff --git a/Resources/Private/Templates/TypoScriptObjects/Markup.html b/Resources/Private/Templates/TypoScriptObjects/Markup.html index 7549648..a6a0c92 100644 --- a/Resources/Private/Templates/TypoScriptObjects/Markup.html +++ b/Resources/Private/Templates/TypoScriptObjects/Markup.html @@ -1,4 +1,4 @@ -