Skip to content

Commit

Permalink
Added new option fadeSpeed. This will fix #147 and #186
Browse files Browse the repository at this point in the history
  • Loading branch information
Arinas committed Oct 21, 2020
1 parent e624a3f commit 5de0e87
Show file tree
Hide file tree
Showing 17 changed files with 132 additions and 111 deletions.
2 changes: 2 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,7 @@ For a whole example just look at the demo folder.
| htmlClass | 'has-lightbox' | string or false | adds class to html element if lightbox is open. If empty or false no class is set |
| rtl | false | bool | change direction to rigth-to-left |
| fixedClass | 'sl-fixed' | string | elements with this class are fixed and get the right padding when lightbox opens |
| fadeSpeed | 300 | int | the duration for fading in and out in milliseconds. Used for caption fadein/out too. If smaller than 100 it should be used with animationSlide:false |

### Events
| Name | Description |
Expand Down Expand Up @@ -206,6 +207,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.5.0 - Added new option fadeSpeed. This will fix #147 and #186**
**2.4.1 - Added new simple-lightbox.legacy.js with IE 11 Support. Fixes #175, #178, #183 and some other bugs from 2.4.0**
**2.4.0 - Added new option for fixed elements class #195**
**2.3.0 - Merged Feature for ESM Modules. Thanks to Dmytro Hrynevych #180**
Expand Down
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "simplelightbox",
"version": "2.4.1",
"version": "2.5.0",
"homepage": "https://simplelightbox.com/",
"authors": [
"André Rinas <[email protected]> (https://www.andrerinas.de)"
Expand Down
17 changes: 12 additions & 5 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.4.1" />
<link rel="stylesheet" href="../dist/simple-lightbox.css?v2.5.0" />
<link rel="stylesheet" href="demo.css" />
<title>SimpleLightbox by André Rinas</title>
</head>
Expand All @@ -14,7 +14,7 @@
<div class="header-container">
<div class="container demo-container">
<div class="info">
<h1>SimpleLightbox <sup>v2.4.1</sup></h1>
<h1>SimpleLightbox <sup>v2.5.0</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>
Expand All @@ -26,11 +26,11 @@ <h1>SimpleLightbox <sup>v2.4.1</sup></h1>
</nav>
</div>
<div class="small-demo">
<a href="img/full/01.jpg"><img src="img/thumb/01.jpg" alt="" /></a>
<a href="img/full/01.jpg"><img src="img/thumb/01.jpg" title="Drone Photography" alt="" /></a>
<a rel="rel2" href="img/full/02.jpg"><img src="img/thumb/02.jpg" alt="" /></a>
<a rel="rel3" href="img/full/03.jpg"><img src="img/thumb/03.jpg" alt="" /></a>
<a rel="rel2" href="img/full/04.jpg"><img src="img/thumb/04.jpg" alt="" /></a>
<a rel="rel2" href="img/full/05.jpg"><img src="img/thumb/05.jpg" alt="" /></a>
<a rel="rel2" href="img/full/05.jpg"><img src="img/thumb/05.jpg" alt="" title="Lego Heads" /></a>
<a rel="rel1" href="img/full/06.jpg"><img src="img/thumb/06.jpg" alt="" /></a>
<div class="clearing"></div>
<div class="caption">
Expand Down Expand Up @@ -389,6 +389,12 @@ <h2>JavaScript Options</h2>
<td>string</td>
<td>elements with this class are fixed and get the right padding when lightbox opens</td>
</tr>
<tr>
<td>fadeSpeed</td>
<td>300</td>
<td>int</td>
<td>the duration for fading in and out in milliseconds. Used for caption fadein/out too. If smaller than 100 it should be used with animationSlide:false</td>
</tr>
</tbody>
</table>
</div>
Expand Down Expand Up @@ -599,6 +605,7 @@ <h2>Customization</h2>
<h2>Changelog</h2>
</div>
<div class="col-right">
<strong>2.5.0</strong> - Added new option fadeSpeed. This will fix #147.<br />
<strong>2.4.1</strong> - Added new simple-lightbox.legacy.js with IE 11 Support<br />
<strong>2.4.0</strong> - Added new option for fixed elements class #195<br />
<strong>2.3.0</strong> - Merged Feature for ESM Modules. Thanks to Serafin Lichtenhahn #173<br />
Expand Down Expand Up @@ -704,7 +711,7 @@ <h2>Author/<br />Contributors</h2>
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/michalsnik/[email protected]/dist/aos.js"></script>
<script src="../dist/simple-lightbox.min.js?v2.4.1"></script>
<script src="../dist/simple-lightbox.min.js?v2.5.0"></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),
Expand Down
2 changes: 1 addition & 1 deletion dist/simple-lightbox.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
By André Rinas, www.andrerinas.de
Documentation, www.simplelightbox.de
Available for use under the MIT License
Version 2.4.1
Version 2.5.0
*/
body.hidden-scroll {
overflow: hidden; }
Expand Down
34 changes: 18 additions & 16 deletions dist/simple-lightbox.esm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
By André Rinas, www.andrerinas.de
Documentation, www.simplelightbox.de
Available for use under the MIT License
Version 2.4.1
Version 2.5.0
*/
class SimpleLightbox {

Expand Down Expand Up @@ -47,7 +47,8 @@ class SimpleLightbox {
maxZoom: 10,
htmlClass: 'has-lightbox',
rtl: false,
fixedClass: 'sl-fixed'
fixedClass: 'sl-fixed',
fadeSpeed: 300
};

transitionPrefix;
Expand Down Expand Up @@ -249,6 +250,7 @@ class SimpleLightbox {

this.domNodes.wrapper = document.createElement('div');
this.domNodes.wrapper.classList.add('sl-wrapper');
this.domNodes.wrapper.setAttribute('tabindex',0);
if (this.options.className) {
this.domNodes.wrapper.classList.add(this.options.className);
}
Expand Down Expand Up @@ -347,7 +349,7 @@ class SimpleLightbox {
}
}

this.fadeOut(document.querySelectorAll('.sl-image img, .sl-overlay, .sl-close, .sl-navigation, .sl-image .sl-caption, .sl-counter'), 300, () => {
this.fadeOut(document.querySelectorAll('.sl-image img, .sl-overlay, .sl-close, .sl-navigation, .sl-image .sl-caption, .sl-counter'), this.options.fadeSpeed, () => {
if (this.options.disableScroll) {
this.toggleScrollbar('show');
}
Expand Down Expand Up @@ -435,7 +437,7 @@ class SimpleLightbox {
this.slide(this.options.animationSpeed / 1000, (-100 * slideDirection) - this.controlCoordinates.swipeDiff + 'px');
}

this.fadeOut(this.domNodes.image, 300, () => {
this.fadeOut(this.domNodes.image, this.options.fadeSpeed, () => {
this.isAnimating = true;
setTimeout(() => {
let element = this.relatedElements[this.currentImageIndex];
Expand Down Expand Up @@ -521,7 +523,7 @@ class SimpleLightbox {

this.domNodes.spinner.style.display = 'none';

this.fadeIn(this.currentImage, 300);
this.fadeIn(this.currentImage, this.options.fadeSpeed);

this.isOpen = true;

Expand Down Expand Up @@ -565,7 +567,7 @@ class SimpleLightbox {
this.slide(this.options.animationSpeed / 1000, 0 + 'px');
}, 50);
}
this.fadeIn(this.domNodes.image, 300, () => {
this.fadeIn(this.domNodes.image, this.options.fadeSpeed, () => {
this.isAnimating = false;
this.setCaption(captionText, imageWidth);
});
Expand Down Expand Up @@ -686,7 +688,7 @@ class SimpleLightbox {


if (!this.domNodes.caption.style.opacity && this.domNodes.caption.style.display !== 'none') {
this.fadeOut(this.domNodes.caption, 200);
this.fadeOut(this.domNodes.caption, this.options.fadeSpeed);
}

this.controlCoordinates.zoomed = true;
Expand Down Expand Up @@ -773,7 +775,7 @@ class SimpleLightbox {
if (this.controlCoordinates.targetScale > 1) {
this.controlCoordinates.zoomed = true;
if (!this.domNodes.caption.style.opacity && this.domNodes.caption.style.display !== 'none') {
this.fadeOut(this.domNodes.caption, 200);
this.fadeOut(this.domNodes.caption, this.options.fadeSpeed);
}
}

Expand Down Expand Up @@ -860,7 +862,7 @@ class SimpleLightbox {
if (this.controlCoordinates.initialScale === 1) {
this.controlCoordinates.zoomed = false;
if (this.domNodes.caption.style.display === 'none') {
this.fadeIn(this.domNodes.caption, 200);
this.fadeIn(this.domNodes.caption, this.options.fadeSpeed);
}
}
this.controlCoordinates.initialPinchDistance = null;
Expand Down Expand Up @@ -916,7 +918,7 @@ class SimpleLightbox {
this.setZoomData(this.controlCoordinates.initialScale, 0, 0);
this.zoomPanElement(0 + "px", 0 + "px", this.controlCoordinates.initialScale);
if (!this.domNodes.caption.style.opacity && this.domNodes.caption.style.display !== 'none') {
this.fadeOut(this.domNodes.caption, 200);
this.fadeOut(this.domNodes.caption, this.options.fadeSpeed);
}
this.controlCoordinates.zoomed = true;
} else {
Expand All @@ -925,7 +927,7 @@ class SimpleLightbox {
this.zoomPanElement(0 + "px", 0 + "px", this.controlCoordinates.initialScale);
this.controlCoordinates.zoomed = false;
if (this.domNodes.caption.style.display === 'none') {
this.fadeIn(this.domNodes.caption, 200);
this.fadeIn(this.domNodes.caption, this.options.fadeSpeed);
}
}
setTimeout(() => {
Expand Down Expand Up @@ -1015,7 +1017,7 @@ class SimpleLightbox {
this.domNodes.image.appendChild(this.domNodes.caption);

setTimeout(() => {
this.fadeIn(this.domNodes.caption, 300);
this.fadeIn(this.domNodes.caption, this.options.fadeSpeed);
}, this.options.captionDelay);
}
}
Expand Down Expand Up @@ -1090,8 +1092,8 @@ class SimpleLightbox {
this.domNodes.image.appendChild(this.currentImage);


this.fadeIn(this.domNodes.overlay, 300);
this.fadeIn([this.domNodes.counter, this.domNodes.navigation, this.domNodes.closeButton], 300);
this.fadeIn(this.domNodes.overlay, this.options.fadeSpeed);
this.fadeIn([this.domNodes.counter, this.domNodes.navigation, this.domNodes.closeButton], this.options.fadeSpeed);

this.show(this.domNodes.spinner);
this.domNodes.counter.querySelector('.sl-current').innerHTML = this.currentImageIndex + 1;
Expand Down Expand Up @@ -1147,7 +1149,7 @@ class SimpleLightbox {

this.isFadeIn = false;

let step = 16.66666 / (duration || 300),
let step = 16.66666 / (duration || this.options.fadeSpeed),
fade = () => {
let currentOpacity = parseFloat(elements[0].style.opacity);
if ((currentOpacity -= step) < 0) {
Expand Down Expand Up @@ -1177,7 +1179,7 @@ class SimpleLightbox {
this.isFadeIn = true;

let opacityTarget = parseFloat(elements[0].dataset.opacityTarget || 1),
step = (16.66666 * opacityTarget) / (duration || 300),
step = (16.66666 * opacityTarget) / (duration || this.options.fadeSpeed),
fade = () => {
let currentOpacity = parseFloat(elements[0].style.opacity);
if (!((currentOpacity += step) > opacityTarget)) {
Expand Down
34 changes: 18 additions & 16 deletions dist/simple-lightbox.jquery.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
By André Rinas, www.andrerinas.de
Documentation, www.simplelightbox.de
Available for use under the MIT License
Version 2.4.1
Version 2.5.0
*/
(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";
Expand Down Expand Up @@ -87,7 +87,8 @@ var SimpleLightbox = /*#__PURE__*/function () {
maxZoom: 10,
htmlClass: 'has-lightbox',
rtl: false,
fixedClass: 'sl-fixed'
fixedClass: 'sl-fixed',
fadeSpeed: 300
});

_defineProperty(this, "transitionPrefix", void 0);
Expand Down Expand Up @@ -296,6 +297,7 @@ var SimpleLightbox = /*#__PURE__*/function () {
this.domNodes.image.classList.add('sl-image');
this.domNodes.wrapper = document.createElement('div');
this.domNodes.wrapper.classList.add('sl-wrapper');
this.domNodes.wrapper.setAttribute('tabindex', 0);

if (this.options.className) {
this.domNodes.wrapper.classList.add(this.options.className);
Expand Down Expand Up @@ -399,7 +401,7 @@ var SimpleLightbox = /*#__PURE__*/function () {
}
}

this.fadeOut(document.querySelectorAll('.sl-image img, .sl-overlay, .sl-close, .sl-navigation, .sl-image .sl-caption, .sl-counter'), 300, function () {
this.fadeOut(document.querySelectorAll('.sl-image img, .sl-overlay, .sl-close, .sl-navigation, .sl-image .sl-caption, .sl-counter'), this.options.fadeSpeed, function () {
if (_this2.options.disableScroll) {
_this2.toggleScrollbar('show');
}
Expand Down Expand Up @@ -487,7 +489,7 @@ var SimpleLightbox = /*#__PURE__*/function () {
this.slide(this.options.animationSpeed / 1000, -100 * slideDirection - this.controlCoordinates.swipeDiff + 'px');
}

this.fadeOut(this.domNodes.image, 300, function () {
this.fadeOut(this.domNodes.image, this.options.fadeSpeed, function () {
_this4.isAnimating = true;
setTimeout(function () {
var element = _this4.relatedElements[_this4.currentImageIndex];
Expand Down Expand Up @@ -574,7 +576,7 @@ var SimpleLightbox = /*#__PURE__*/function () {
_this5.domNodes.image.style.height = imageHeight + 'px';
_this5.domNodes.spinner.style.display = 'none';

_this5.fadeIn(_this5.currentImage, 300);
_this5.fadeIn(_this5.currentImage, _this5.options.fadeSpeed);

_this5.isOpen = true;
var captionContainer = _this5.options.captionSelector === 'self' ? _this5.relatedElements[_this5.currentImageIndex] : _this5.relatedElements[_this5.currentImageIndex].querySelector(_this5.options.captionSelector),
Expand Down Expand Up @@ -623,7 +625,7 @@ var SimpleLightbox = /*#__PURE__*/function () {
}, 50);
}

_this5.fadeIn(_this5.domNodes.image, 300, function () {
_this5.fadeIn(_this5.domNodes.image, _this5.options.fadeSpeed, function () {
_this5.isAnimating = false;

_this5.setCaption(captionText, imageWidth);
Expand Down Expand Up @@ -751,7 +753,7 @@ var SimpleLightbox = /*#__PURE__*/function () {
_this6.zoomPanElement(0 + "px", 0 + "px", _this6.controlCoordinates.initialScale);

if (!_this6.domNodes.caption.style.opacity && _this6.domNodes.caption.style.display !== 'none') {
_this6.fadeOut(_this6.domNodes.caption, 200);
_this6.fadeOut(_this6.domNodes.caption, _this6.options.fadeSpeed);
}

_this6.controlCoordinates.zoomed = true;
Expand Down Expand Up @@ -846,7 +848,7 @@ var SimpleLightbox = /*#__PURE__*/function () {
_this6.controlCoordinates.zoomed = true;

if (!_this6.domNodes.caption.style.opacity && _this6.domNodes.caption.style.display !== 'none') {
_this6.fadeOut(_this6.domNodes.caption, 200);
_this6.fadeOut(_this6.domNodes.caption, _this6.options.fadeSpeed);
}
}

Expand Down Expand Up @@ -933,7 +935,7 @@ var SimpleLightbox = /*#__PURE__*/function () {
_this6.controlCoordinates.zoomed = false;

if (_this6.domNodes.caption.style.display === 'none') {
_this6.fadeIn(_this6.domNodes.caption, 200);
_this6.fadeIn(_this6.domNodes.caption, _this6.options.fadeSpeed);
}
}

Expand Down Expand Up @@ -997,7 +999,7 @@ var SimpleLightbox = /*#__PURE__*/function () {
_this6.zoomPanElement(0 + "px", 0 + "px", _this6.controlCoordinates.initialScale);

if (!_this6.domNodes.caption.style.opacity && _this6.domNodes.caption.style.display !== 'none') {
_this6.fadeOut(_this6.domNodes.caption, 200);
_this6.fadeOut(_this6.domNodes.caption, _this6.options.fadeSpeed);
}

_this6.controlCoordinates.zoomed = true;
Expand All @@ -1011,7 +1013,7 @@ var SimpleLightbox = /*#__PURE__*/function () {
_this6.controlCoordinates.zoomed = false;

if (_this6.domNodes.caption.style.display === 'none') {
_this6.fadeIn(_this6.domNodes.caption, 200);
_this6.fadeIn(_this6.domNodes.caption, _this6.options.fadeSpeed);
}
}

Expand Down Expand Up @@ -1108,7 +1110,7 @@ var SimpleLightbox = /*#__PURE__*/function () {
this.domNodes.caption.innerHTML = captionText;
this.domNodes.image.appendChild(this.domNodes.caption);
setTimeout(function () {
_this7.fadeIn(_this7.domNodes.caption, 300);
_this7.fadeIn(_this7.domNodes.caption, _this7.options.fadeSpeed);
}, this.options.captionDelay);
}
}
Expand Down Expand Up @@ -1186,8 +1188,8 @@ var SimpleLightbox = /*#__PURE__*/function () {
this.domNodes.image.innerHTML = '';
this.domNodes.image.setAttribute('style', '');
this.domNodes.image.appendChild(this.currentImage);
this.fadeIn(this.domNodes.overlay, 300);
this.fadeIn([this.domNodes.counter, this.domNodes.navigation, this.domNodes.closeButton], 300);
this.fadeIn(this.domNodes.overlay, this.options.fadeSpeed);
this.fadeIn([this.domNodes.counter, this.domNodes.navigation, this.domNodes.closeButton], this.options.fadeSpeed);
this.show(this.domNodes.spinner);
this.domNodes.counter.querySelector('.sl-current').innerHTML = this.currentImageIndex + 1;
this.domNodes.counter.querySelector('.sl-total').innerHTML = this.relatedElements.length;
Expand Down Expand Up @@ -1299,7 +1301,7 @@ var SimpleLightbox = /*#__PURE__*/function () {

this.isFadeIn = false;

var step = 16.66666 / (duration || 300),
var step = 16.66666 / (duration || this.options.fadeSpeed),
fade = function fade() {
var currentOpacity = parseFloat(elements[0].style.opacity);

Expand Down Expand Up @@ -1366,7 +1368,7 @@ var SimpleLightbox = /*#__PURE__*/function () {
this.isFadeIn = true;

var opacityTarget = parseFloat(elements[0].dataset.opacityTarget || 1),
step = 16.66666 * opacityTarget / (duration || 300),
step = 16.66666 * opacityTarget / (duration || this.options.fadeSpeed),
fade = function fade() {
var currentOpacity = parseFloat(elements[0].style.opacity);

Expand Down
2 changes: 1 addition & 1 deletion dist/simple-lightbox.jquery.min.js
View file

Large diffs are not rendered by default.

Loading

2 comments on commit 5de0e87

@davidverweij
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Much appreciated! Thanks for the hard work!

@andreknieriem
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you are welcome

Please sign in to comment.