Added new option uniqueImages for #156, focus for #190 and fixed bug #…

…200 issue closing during animation.

README.md

@@ -112,6 +112,7 @@ For a whole example just look at the demo folder.
 | 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 |
+| uniqueImages | true | bool | whether to uniqualize images or not |
 
 ### Events
 | Name | Description |
@@ -132,12 +133,19 @@ For a whole example just look at the demo folder.
 
 **Example** 
 ```javascript
-$('.gallery a').on('open.simplelightbox', function () {
- // do something…
+let gallery = new SimpleLightbox('.gallery a');
+gallery.on('show.simplelightbox', function () {
+ // do something…
 });
 
-$('.gallery a').on('error.simplelightbox', function (e) {
- console.log(e); // some usefull information
+gallery.on('error.simplelightbox', function (e) {
+ console.log(e); // some usefull information
+});
+
+// with jQuery nearly the same
+let gallery = $('.gallery a').simpleLightbox();
+gallery.on('show.simplelightbox', function () {
+ // do something…
 });
 ```
 
@@ -207,6 +215,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.6.0 - Added new option uniqueImages for #156, focus for #190 and fixed bug #200 issue closing during animation** 
 **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** 

bower.json

@@ -1,6 +1,6 @@
 {
  "name": "simplelightbox",
- "version": "2.5.0",
+ "version": "2.6.0",
  "homepage": "https://simplelightbox.com/",
  "authors": [
  "André Rinas <[email protected]> (https://www.andrerinas.de)"

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.5.0" />
+<link rel="stylesheet" href="../dist/simple-lightbox.css?v2.6.0" />
 <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.5.0</sup></h1>
+ <h1>SimpleLightbox <sup>v2.6.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>
@@ -395,6 +395,18 @@ <h2>JavaScript Options</h2>
  <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>
+ <tr>
+ <td>uniqueImages</td>
+ <td>true</td>
+ <td>bool</td>
+ <td>whether to uniqualize images or not</td>
+ </tr>
+ <tr>
+ <td>focus</td>
+ <td>true</td>
+ <td>bool</td>
+ <td>focus the lightbox on open to enable tab control</td>
+ </tr>
  </tbody>
  </table>
  </div>
@@ -609,6 +621,7 @@ <h2>Customization</h2>
  <h2>Changelog</h2>
  </div>
  <div class="col-right">
+ <strong>2.6.0</strong> - Added new option uniqueImages for #156, focus for #190 and fixed bug #200 issue closing during animation.<br />
  <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 />
@@ -710,12 +723,8 @@ <h2>Author/<br />Contributors</h2>
  Images from <a href="https://unsplash.com/" target="_blank">Unsplash</a> &middot; Thanks to <a target="_blank" href="http://prismjs.com/">PrismJS</a> for syntax highlighting.
  </div>
 </footer>
-<script
- src="https://code.jquery.com/jquery-3.4.1.min.js"
- 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.5.0"></script>
+<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.6.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),

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.5.0
+ Version 2.6.0
 */
 body.hidden-scroll {
  overflow: hidden; }
@@ -19,7 +19,12 @@ body.hidden-scroll {
  z-index: 1035; }
 
 .sl-wrapper {
- z-index: 1040; }
+ z-index: 1040;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed; }
  .sl-wrapper * {
  box-sizing: border-box; }
  .sl-wrapper button {
@@ -44,8 +49,6 @@ body.hidden-scroll {
  font-family: Arial, Baskerville, monospace;
  color: #000;
  font-size: 3rem; }
- .sl-wrapper .sl-close:focus {
- outline: none; }
  .sl-wrapper .sl-counter {
  display: none;
  position: fixed;
@@ -75,8 +78,6 @@ body.hidden-scroll {
  .sl-wrapper .sl-navigation button.sl-prev {
  left: 5px;
  font-size: 2rem; }
- .sl-wrapper .sl-navigation button:focus {
- outline: none; }
  @media (min-width: 35.5em) {
  .sl-wrapper .sl-navigation button {
  width: 44px; }

dist/simple-lightbox.esm.js

@@ -2,7 +2,7 @@
  By André Rinas, www.andrerinas.de
  Documentation, www.simplelightbox.de
  Available for use under the MIT License
- Version 2.5.0
+ Version 2.6.0
 */
 class SimpleLightbox {
 
@@ -48,7 +48,9 @@ class SimpleLightbox {
  htmlClass: 'has-lightbox',
  rtl: false,
  fixedClass: 'sl-fixed',
- fadeSpeed: 300
+ fadeSpeed: 300,
+ uniqueImages: true,
+ focus: true
  };
 
  transitionPrefix;
@@ -146,6 +148,20 @@ class SimpleLightbox {
  this.elements = this.getRelated(this.options.rel);
  }
 
+ if (this.options.uniqueImages) {
+ let imgArr = [];
+ this.elements = Array.from(this.elements).filter(
+ element => {
+ let src = element.getAttribute(this.options.sourceAttr);
+ if(imgArr.indexOf(src) === -1) {
+ imgArr.push(src);
+ return true;
+ }
+ return false;
+ }
+ );
+ }
+
  this.createDomNodes();
 
  if (this.options.close) {
@@ -175,8 +191,8 @@ class SimpleLightbox {
 
  // close addEventListener click addEventListener doc
  if (this.options.docClose) {
- this.addEventListener(this.domNodes.overlay, ['click.' + this.eventNamespace, 'touchstart.' + this.eventNamespace], (event) => {
- if (this.isOpen) {
+ this.addEventListener(this.domNodes.wrapper, ['click.' + this.eventNamespace, 'touchstart.' + this.eventNamespace], (event) => {
+ if (this.isOpen && event.target === event.currentTarget) {
  this.close();
  }
  });
@@ -250,7 +266,9 @@ class SimpleLightbox {
 
  this.domNodes.wrapper = document.createElement('div');
  this.domNodes.wrapper.classList.add('sl-wrapper');
- this.domNodes.wrapper.setAttribute('tabindex',0);
+ this.domNodes.wrapper.setAttribute('tabindex',-1);
+ this.domNodes.wrapper.setAttribute('role','dialog');
+ this.domNodes.wrapper.setAttribute('aria-hidden',false);
  if (this.options.className) {
  this.domNodes.wrapper.classList.add(this.options.className);
  }
@@ -349,6 +367,9 @@ 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, () => {
  if (this.options.disableScroll) {
  this.toggleScrollbar('show');
@@ -438,22 +459,28 @@ class SimpleLightbox {
  }
 
  this.fadeOut(this.domNodes.image, this.options.fadeSpeed, () => {
- this.isAnimating = true;
- setTimeout(() => {
- let element = this.relatedElements[this.currentImageIndex];
- this.currentImage.setAttribute('src', element.getAttribute(this.options.sourceAttr));
+ this.isAnimating = true;
 
- if (this.loadedImages.indexOf(element.getAttribute(this.options.sourceAttr)) === -1) {
- this.show(this.domNodes.spinner);
- }
+ if(!this.isClosing) {
+ setTimeout(() => {
 
- if(this.domNodes.image.contains(this.domNodes.caption)) {
- this.domNodes.image.removeChild(this.domNodes.caption);
- }
+ let element = this.relatedElements[this.currentImageIndex];
+ this.currentImage.setAttribute('src', element.getAttribute(this.options.sourceAttr));
+
+ if (this.loadedImages.indexOf(element.getAttribute(this.options.sourceAttr)) === -1) {
+ this.show(this.domNodes.spinner);
+ }
+
+ if(this.domNodes.image.contains(this.domNodes.caption)) {
+ this.domNodes.image.removeChild(this.domNodes.caption);
+ }
 
- this.adjustImage(slideDirection);
- if (this.options.preloading) this.preload();
- }, 100);
+ this.adjustImage(slideDirection);
+ if (this.options.preloading) this.preload();
+ }, 100);
+ } else {
+ this.isAnimating = false;
+ }
  });
  }
 
@@ -522,8 +549,14 @@ class SimpleLightbox {
  this.domNodes.image.style.height = imageHeight + 'px';
 
  this.domNodes.spinner.style.display = 'none';
-
- this.fadeIn(this.currentImage, this.options.fadeSpeed);
+ if( this.options.focus ) {
+ this.forceFocus();
+ }
+ this.fadeIn(this.currentImage, this.options.fadeSpeed, () => {
+ if( this.options.focus ) {
+ this.domNodes.wrapper.focus();
+ }
+ });
 
  this.isOpen = true;
 
@@ -1109,6 +1142,17 @@ class SimpleLightbox {
  }, this.options.animationSpeed);
  }
 
+ forceFocus() {
+ this.removeEventListener(document, 'focusin.' + this.eventNamespace);
+ this.addEventListener(document, 'focusin.' + this.eventNamespace, event => {
+ if (document !== event.target &&
+ this.domNodes.wrapper !== event.target &&
+ !this.domNodes.wrapper.contains(event.target)) {
+ this.domNodes.wrapper.focus();
+ }
+ });
+ }
+
  // utility
 
  addEventListener(elements, events, callback, opts) {
@@ -1135,8 +1179,10 @@ class SimpleLightbox {
  events = this.wrap(events);
  for (let element of elements) {
  for (let event of events) {
- element.removeEventListener(event.split('.')[0], element.namespaces[event]);
- delete element.namespaces[event];
+ if(element.namespaces && element.namespaces[event]) {
+ element.removeEventListener(event.split('.')[0], element.namespaces[event]);
+ delete element.namespaces[event];
+ }
  }
  }
  }
@@ -1286,7 +1332,7 @@ class SimpleLightbox {
  ]);
 
  this.removeEventListener(this.elements, 'click.' + this.eventNamespace);
-
+ this.removeEventListener(document, 'focusin.' + this.eventNamespace);
  this.removeEventListener(document.body, 'contextmenu.' + this.eventNamespace);
  this.removeEventListener(document.body, 'keyup.' + this.eventNamespace);