Fixed #258 with opacity flicker on overlay. For this, moved style opt…

…ion captionOpacity to js plugin
andreknieriem · Jan 24, 2022 · 7aaf49b · 7aaf49b
1 parent ee6dd55
commit 7aaf49b
Show file tree

Hide file tree

Showing 18 changed files with 63 additions and 49 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2021 Andre Rinas
+Copyright (c) 2022 Andre Rinas
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -75,6 +75,7 @@ For a complete example just look at the demo folder.
 | -------- | ------- | ---- | ----------- |
 | sourceAttr | href | string | The attribute used for large images |
 | overlay | true | bool | Show an overlay or not |
+| overlayOpacity | 0.7 | float | the opacity of the overlay |
 | spinner | true | bool | Show spinner or not |
 | nav | true | bool | Show arrow-navigation or not |
 | navText | ['&larr;','&rarr;'] | array | Text or html for the navigation arrows |
@@ -193,7 +194,6 @@ $sl-overlay-background: #fff;
 $sl-navigation-color: #000;
 $sl-caption-color: #fff;
 $sl-caption-background: #000;
-$sl-overlay-opacity: 0.7;
 
 $sl-counter-fontsize: 1rem;
 $sl-caption-fontsize: 1rem;
@@ -223,6 +223,7 @@ Run `gulp watch` to enable continous watching of both src/simple-lightbox.js and
 Just call `gulp build` to have all files and variants created inside dist!
 
 ### Changelog
+**2.10.2 - Fixed #258 with opacity flicker on overlay. For this, moved style option captionOpacity to js plugin**    
 **2.10.1 - Fixed #255 fast switching photos and #256 for hiding back and next buttons on loop: false**    
 **2.10.0 - Fixed #254 - Nav Buttons disappear and adding new method getLighboxData so get some useful data for #251**    
 **2.9.0 - Added mousescroll function with new options mouseScroll and mouseScrollFactor**  

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "simplelightbox",
-  "version": "2.10.1",
+  "version": "2.10.2",
   "homepage": "https://simplelightbox.com/",
   "authors": [
     "André Rinas <[email protected]> (https://www.andrerinas.de)"

diff --git a/demo/index.html b/demo/index.html
@@ -4,7 +4,7 @@
 <meta charset="utf-8">
 <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
 <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,700" rel="stylesheet">
-<link rel="stylesheet" href="../dist/simple-lightbox.css?v2.10.1" />
+<link rel="stylesheet" href="../dist/simple-lightbox.css?v2.10.2" />
 <link rel="stylesheet" href="demo.css" />
 <title>SimpleLightbox by André Rinas</title>
 </head>
@@ -14,7 +14,7 @@
 	<div class="header-container">
 		<div class="container demo-container">
 			<div class="info">
-				<h1>SimpleLightbox <sup>v2.10.1</sup></h1>
+				<h1>SimpleLightbox <sup>v2.10.2</sup></h1>
 				<span class="subline">Touch-friendly image lightbox</span>
 				<nav>
 					<a class="btn donate" target="_blank" href="https://www.paypal.me/anrinas">Donate</a>
@@ -157,6 +157,12 @@ <h2>JavaScript Options</h2>
 					<td>show an overlay or not</td>
 					</tr>
 					<tr>
+					<td>overlayOpacity</td>
+					<td>0.7</td>
+					<td>float</td>
+					<td>the opacity of the overlay</td>
+					</tr>
+					<tr>
 					<td>spinner</td>
 					<td>true</td>
 					<td>bool</td>
@@ -605,7 +611,6 @@ <h2>Customization</h2>
 $sl-navigation-color: #000;
 $sl-caption-color: #fff;
 $sl-caption-background: #000;
-$sl-overlay-opacity: 0.7;
 
 $sl-counter-fontsize: 1rem;
 $sl-caption-fontsize: 1rem;
@@ -637,6 +642,7 @@ <h2>Customization</h2>
 				<h2>Changelog</h2>
 			</div>
 			<div class="col-right">
+				<strong>2.10.2</strong> - Fixed #258 with opacity flicker on overlay. For this, moved style option captionOpacity to js plugin<br />
 				<strong>2.10.1</strong> - Fixed #255 fast switching photos and #256 for hiding back and next buttons on loop: false<br />
 				<strong>2.10.0</strong> - Fixed #254 - Nav Buttons disappear and adding new method getLighboxData so get some useful data for #251<br />
 				<strong>2.9.0</strong> - Added mousescroll function with new options mouseScroll and mouseScrollFactor<br />
@@ -751,7 +757,7 @@ <h2>Author/<br />Contributors</h2>
 	</div>
 </footer>
 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
-<script src="../dist/simple-lightbox.js?v2.10.1"></script>
+<script src="../dist/simple-lightbox.js?v2.10.2"></script>
 <script>
 	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 	(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

diff --git a/dist/simple-lightbox.css b/dist/simple-lightbox.css
@@ -2,7 +2,7 @@
 	By André Rinas, www.andrerinas.de
 	Documentation, www.simplelightbox.de
 	Available for use under the MIT License
-	Version 2.10.1
+	Version 2.10.2
 */
 body.hidden-scroll {
   overflow: hidden; }
@@ -14,7 +14,6 @@ body.hidden-scroll {
   top: 0;
   bottom: 0;
   background: #fff;
-  opacity: 0.7;
   display: none;
   z-index: 1035; }
 

diff --git a/dist/simple-lightbox.esm.js b/dist/simple-lightbox.esm.js
@@ -2,13 +2,14 @@
 	By André Rinas, www.andrerinas.de
 	Documentation, www.simplelightbox.de
 	Available for use under the MIT License
-	Version 2.10.1
+	Version 2.10.2
 */
 class SimpleLightbox {
 
     defaultOptions = {
         sourceAttr: 'href',
         overlay: true,
+        overlayOpacity: 0.7,
         spinner: true,
         nav: true,
         navText: ['&lsaquo;', '&rsaquo;'],
@@ -257,7 +258,7 @@ class SimpleLightbox {
     createDomNodes() {
         this.domNodes.overlay = document.createElement('div');
         this.domNodes.overlay.classList.add('sl-overlay');
-        this.domNodes.overlay.dataset.opacityTarget = ".7";
+        this.domNodes.overlay.dataset.opacityTarget = this.options.overlayOpacity;
 
         this.domNodes.closeButton = document.createElement('button');
         this.domNodes.closeButton.classList.add('sl-close');
@@ -389,8 +390,8 @@ class SimpleLightbox {
 
         this.removeEventListener(document, 'focusin.' + this.eventNamespace);
 
-
-        this.fadeOut(document.querySelectorAll('.sl-image img, .sl-overlay, .sl-close, .sl-navigation, .sl-image .sl-caption, .sl-counter'), this.options.fadeSpeed, () => {
+        this.fadeOut(this.domNodes.overlay, this.options.fadeSpeed);
+        this.fadeOut(document.querySelectorAll('.sl-image img,  .sl-close, .sl-navigation, .sl-image .sl-caption, .sl-counter'), this.options.fadeSpeed, () => {
             if (this.options.disableScroll) {
                 this.toggleScrollbar('show');
             }
@@ -1295,7 +1296,7 @@ class SimpleLightbox {
     fadeOut(elements, duration, callback) {
         elements = this.wrap(elements);
         for (let element of elements) {
-            element.style.opacity = 1;
+            element.style.opacity = parseFloat(element) || window.getComputedStyle(element).getPropertyValue("opacity");
         }
 
         this.isFadeIn = false;
@@ -1342,7 +1343,7 @@ class SimpleLightbox {
                     requestAnimationFrame(fade);
                 } else {
                     for (let element of elements) {
-                        element.style.opacity = '';
+                        element.style.opacity = opacityTarget;
                     }
                     callback && callback.call(this, elements);
                 }

diff --git a/dist/simple-lightbox.jquery.js b/dist/simple-lightbox.jquery.js
@@ -2,7 +2,7 @@
 	By André Rinas, www.andrerinas.de
 	Documentation, www.simplelightbox.de
 	Available for use under the MIT License
-	Version 2.10.1
+	Version 2.10.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<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
 "use strict";
@@ -51,6 +51,7 @@ var SimpleLightbox = /*#__PURE__*/function () {
     _defineProperty(this, "defaultOptions", {
       sourceAttr: 'href',
       overlay: true,
+      overlayOpacity: 0.7,
       spinner: true,
       nav: true,
       navText: ['&lsaquo;', '&rsaquo;'],
@@ -317,7 +318,7 @@ var SimpleLightbox = /*#__PURE__*/function () {
     value: function createDomNodes() {
       this.domNodes.overlay = document.createElement('div');
       this.domNodes.overlay.classList.add('sl-overlay');
-      this.domNodes.overlay.dataset.opacityTarget = ".7";
+      this.domNodes.overlay.dataset.opacityTarget = this.options.overlayOpacity;
       this.domNodes.closeButton = document.createElement('button');
       this.domNodes.closeButton.classList.add('sl-close');
       this.domNodes.closeButton.innerHTML = this.options.closeText;
@@ -448,7 +449,8 @@ var SimpleLightbox = /*#__PURE__*/function () {
       }
 
       this.removeEventListener(document, 'focusin.' + this.eventNamespace);
-      this.fadeOut(document.querySelectorAll('.sl-image img, .sl-overlay, .sl-close, .sl-navigation, .sl-image .sl-caption, .sl-counter'), this.options.fadeSpeed, function () {
+      this.fadeOut(this.domNodes.overlay, this.options.fadeSpeed);
+      this.fadeOut(document.querySelectorAll('.sl-image img,  .sl-close, .sl-navigation, .sl-image .sl-caption, .sl-counter'), this.options.fadeSpeed, function () {
         if (_this2.options.disableScroll) {
           _this2.toggleScrollbar('show');
         }
@@ -1463,7 +1465,7 @@ var SimpleLightbox = /*#__PURE__*/function () {
       try {
         for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
           var element = _step5.value;
-          element.style.opacity = 1;
+          element.style.opacity = parseFloat(element) || window.getComputedStyle(element).getPropertyValue("opacity");
         }
       } catch (err) {
         _iterator5.e(err);
@@ -1569,7 +1571,7 @@ var SimpleLightbox = /*#__PURE__*/function () {
           try {
             for (_iterator10.s(); !(_step10 = _iterator10.n()).done;) {
               var _element2 = _step10.value;
-              _element2.style.opacity = '';
+              _element2.style.opacity = opacityTarget;
             }
           } catch (err) {
             _iterator10.e(err);

diff --git a/dist/simple-lightbox.jquery.min.js b/dist/simple-lightbox.jquery.min.js
diff --git a/dist/simple-lightbox.js b/dist/simple-lightbox.js
@@ -2,7 +2,7 @@
 	By André Rinas, www.andrerinas.de
 	Documentation, www.simplelightbox.de
 	Available for use under the MIT License
-	Version 2.10.1
+	Version 2.10.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<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
 (function (global){(function (){
@@ -38,6 +38,7 @@ var SimpleLightbox = /*#__PURE__*/function () {
     _defineProperty(this, "defaultOptions", {
       sourceAttr: 'href',
       overlay: true,
+      overlayOpacity: 0.7,
       spinner: true,
       nav: true,
       navText: ['&lsaquo;', '&rsaquo;'],
@@ -304,7 +305,7 @@ var SimpleLightbox = /*#__PURE__*/function () {
     value: function createDomNodes() {
       this.domNodes.overlay = document.createElement('div');
       this.domNodes.overlay.classList.add('sl-overlay');
-      this.domNodes.overlay.dataset.opacityTarget = ".7";
+      this.domNodes.overlay.dataset.opacityTarget = this.options.overlayOpacity;
       this.domNodes.closeButton = document.createElement('button');
       this.domNodes.closeButton.classList.add('sl-close');
       this.domNodes.closeButton.innerHTML = this.options.closeText;
@@ -435,7 +436,8 @@ var SimpleLightbox = /*#__PURE__*/function () {
       }
 
       this.removeEventListener(document, 'focusin.' + this.eventNamespace);
-      this.fadeOut(document.querySelectorAll('.sl-image img, .sl-overlay, .sl-close, .sl-navigation, .sl-image .sl-caption, .sl-counter'), this.options.fadeSpeed, function () {
+      this.fadeOut(this.domNodes.overlay, this.options.fadeSpeed);
+      this.fadeOut(document.querySelectorAll('.sl-image img,  .sl-close, .sl-navigation, .sl-image .sl-caption, .sl-counter'), this.options.fadeSpeed, function () {
         if (_this2.options.disableScroll) {
           _this2.toggleScrollbar('show');
         }
@@ -1450,7 +1452,7 @@ var SimpleLightbox = /*#__PURE__*/function () {
       try {
         for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
           var element = _step5.value;
-          element.style.opacity = 1;
+          element.style.opacity = parseFloat(element) || window.getComputedStyle(element).getPropertyValue("opacity");
         }
       } catch (err) {
         _iterator5.e(err);
@@ -1556,7 +1558,7 @@ var SimpleLightbox = /*#__PURE__*/function () {
           try {
             for (_iterator10.s(); !(_step10 = _iterator10.n()).done;) {
               var _element2 = _step10.value;
-              _element2.style.opacity = '';
+              _element2.style.opacity = opacityTarget;
             }
           } catch (err) {
             _iterator10.e(err);

diff --git a/dist/simple-lightbox.legacy.js b/dist/simple-lightbox.legacy.js
@@ -2,7 +2,7 @@
 	By André Rinas, www.andrerinas.de
 	Documentation, www.simplelightbox.de
 	Available for use under the MIT License
-	Version 2.10.1
+	Version 2.10.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<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
 var global = require('../internals/global');
@@ -4793,6 +4793,7 @@ var SimpleLightbox = /*#__PURE__*/function () {
     _defineProperty(this, "defaultOptions", {
       sourceAttr: 'href',
       overlay: true,
+      overlayOpacity: 0.7,
       spinner: true,
       nav: true,
       navText: ['&lsaquo;', '&rsaquo;'],
@@ -5059,7 +5060,7 @@ var SimpleLightbox = /*#__PURE__*/function () {
     value: function createDomNodes() {
       this.domNodes.overlay = document.createElement('div');
       this.domNodes.overlay.classList.add('sl-overlay');
-      this.domNodes.overlay.dataset.opacityTarget = ".7";
+      this.domNodes.overlay.dataset.opacityTarget = this.options.overlayOpacity;
       this.domNodes.closeButton = document.createElement('button');
       this.domNodes.closeButton.classList.add('sl-close');
       this.domNodes.closeButton.innerHTML = this.options.closeText;
@@ -5190,7 +5191,8 @@ var SimpleLightbox = /*#__PURE__*/function () {
       }
 
       this.removeEventListener(document, 'focusin.' + this.eventNamespace);
-      this.fadeOut(document.querySelectorAll('.sl-image img, .sl-overlay, .sl-close, .sl-navigation, .sl-image .sl-caption, .sl-counter'), this.options.fadeSpeed, function () {
+      this.fadeOut(this.domNodes.overlay, this.options.fadeSpeed);
+      this.fadeOut(document.querySelectorAll('.sl-image img,  .sl-close, .sl-navigation, .sl-image .sl-caption, .sl-counter'), this.options.fadeSpeed, function () {
         if (_this2.options.disableScroll) {
           _this2.toggleScrollbar('show');
         }
@@ -6205,7 +6207,7 @@ var SimpleLightbox = /*#__PURE__*/function () {
       try {
         for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
           var element = _step5.value;
-          element.style.opacity = 1;
+          element.style.opacity = parseFloat(element) || window.getComputedStyle(element).getPropertyValue("opacity");
         }
       } catch (err) {
         _iterator5.e(err);
@@ -6311,7 +6313,7 @@ var SimpleLightbox = /*#__PURE__*/function () {
           try {
             for (_iterator10.s(); !(_step10 = _iterator10.n()).done;) {
               var _element2 = _step10.value;
-              _element2.style.opacity = '';
+              _element2.style.opacity = opacityTarget;
             }
           } catch (err) {
             _iterator10.e(err);

diff --git a/dist/simple-lightbox.legacy.min.js b/dist/simple-lightbox.legacy.min.js