Fixing #314. The captionSelector was to heavy. To not break #61 again…

… I wrote a workaround for css + & > selectors

README.md

@@ -225,6 +225,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.14.1 - Fixing #314. The captionSelector was to heavy. To not break #61 again I wrote a workaround for css + & > selectors**  
 **2.14.0 - Merging #309 - thank to @romain25, fixing #305 - removeChild error if overlay option is disabled.**  
 **2.13.0 - Fixing #281 close lightbox on load,#311 caption not working, #307 second time opening not working with download option, #310 - passive scroll event default warning in console.**  
 **2.12.1 - Fixing #292. Error with download-link**  

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "simplelightbox",
-  "version": "2.14.0",
+  "version": "2.14.1",
   "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.14.0" />
+<link rel="stylesheet" href="../dist/simple-lightbox.css?v2.14.1" />
 <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.14.0</sup></h1>
+				<h1>SimpleLightbox <sup>v2.14.1</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>
@@ -652,6 +652,7 @@ <h2>Customization</h2>
 				<h2>Changelog</h2>
 			</div>
 			<div class="col-right">
+				<strong>2.14.1</strong> - Fixing #314. The captionSelector was to heavy. To not break #61 again I wrote a workaround for css + & > selectors<br />
 				<strong>2.14.0</strong> - Merging #309 - thank to @romain25, fixing #305 - removeChild error if overlay option is disabled.<br />
 				<strong>2.13.0</strong> - Fixing #281 close lightbox on load,#311 caption not working, #307 second time opening not working with download option, #310 - passive scroll event default warning in console.<br />
 				<strong>2.12.1</strong> - Fixing #292. Error with download-link<br />
@@ -774,7 +775,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.14.0"></script>
+<script src="../dist/simple-lightbox.js?v2.14.1"></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.com
 	Available for use under the MIT License
-	Version 2.14.0
+	Version 2.14.1
 */
 body.hidden-scroll {
   overflow: hidden;

dist/simple-lightbox.esm.js

@@ -2,7 +2,7 @@
 	By André Rinas, www.andrerinas.de
 	Documentation, www.simplelightbox.com
 	Available for use under the MIT License
-	Version 2.14.0
+	Version 2.14.1
 */
 class SimpleLightbox {
 
@@ -257,6 +257,25 @@ class SimpleLightbox {
         return supportsPassive;
     }
 
+    getCaptionElement(elem) {
+        // look at sibling selector
+        if( this.options.captionSelector.startsWith('+')) {
+            let selector = this.options.captionSelector.replace(/^\+/, '').trimStart();
+            let sibling = elem.nextElementSibling;
+            if(sibling.matches(selector)) {
+                return sibling;
+            }
+            return false;
+        }
+        else if( this.options.captionSelector.startsWith('>') ) {
+            let selector = this.options.captionSelector.replace(/^>/, '').trimStart();
+            return elem.querySelector(selector);
+        }
+        else {
+            return elem.querySelector(this.options.captionSelector);
+        }
+    }
+
     generateQuerySelector(elem) {
         const {
             tagName,
@@ -636,7 +655,7 @@ class SimpleLightbox {
             if (typeof this.options.captionSelector === 'string') {
                 captionContainer = this.options.captionSelector === 'self'
                     ? this.relatedElements[this.currentImageIndex]
-                    : document.querySelector(this.generateQuerySelector(this.relatedElements[this.currentImageIndex]) + ' ' + this.options.captionSelector);
+                    : this.getCaptionElement(this.relatedElements[this.currentImageIndex]);
             } else if (typeof this.options.captionSelector === 'function') {
                 captionContainer = this.options.captionSelector(this.relatedElements[this.currentImageIndex]);
             }

dist/simple-lightbox.jquery.js

@@ -2,7 +2,7 @@
 	By André Rinas, www.andrerinas.de
 	Documentation, www.simplelightbox.com
 	Available for use under the MIT License
-	Version 2.14.0
+	Version 2.14.1
 */
 (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";
@@ -264,6 +264,24 @@ var SimpleLightbox = /*#__PURE__*/function () {
       } catch (e) {}
       return supportsPassive;
     }
+  }, {
+    key: "getCaptionElement",
+    value: function getCaptionElement(elem) {
+      // look at sibling selector
+      if (this.options.captionSelector.startsWith('+')) {
+        var selector = this.options.captionSelector.replace(/^\+/, '').trimStart();
+        var sibling = elem.nextElementSibling;
+        if (sibling.matches(selector)) {
+          return sibling;
+        }
+        return false;
+      } else if (this.options.captionSelector.startsWith('>')) {
+        var _selector = this.options.captionSelector.replace(/^>/, '').trimStart();
+        return elem.querySelector(_selector);
+      } else {
+        return elem.querySelector(this.options.captionSelector);
+      }
+    }
   }, {
     key: "generateQuerySelector",
     value: function generateQuerySelector(elem) {
@@ -592,7 +610,7 @@ var SimpleLightbox = /*#__PURE__*/function () {
         _this5.isOpen = true;
         var captionContainer, captionText;
         if (typeof _this5.options.captionSelector === 'string') {
-          captionContainer = _this5.options.captionSelector === 'self' ? _this5.relatedElements[_this5.currentImageIndex] : document.querySelector(_this5.generateQuerySelector(_this5.relatedElements[_this5.currentImageIndex]) + ' ' + _this5.options.captionSelector);
+          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]);
         }

dist/simple-lightbox.js

@@ -2,7 +2,7 @@
 	By André Rinas, www.andrerinas.de
 	Documentation, www.simplelightbox.com
 	Available for use under the MIT License
-	Version 2.14.0
+	Version 2.14.1
 */
 (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 (){
@@ -252,6 +252,24 @@ var SimpleLightbox = /*#__PURE__*/function () {
       } catch (e) {}
       return supportsPassive;
     }
+  }, {
+    key: "getCaptionElement",
+    value: function getCaptionElement(elem) {
+      // look at sibling selector
+      if (this.options.captionSelector.startsWith('+')) {
+        var selector = this.options.captionSelector.replace(/^\+/, '').trimStart();
+        var sibling = elem.nextElementSibling;
+        if (sibling.matches(selector)) {
+          return sibling;
+        }
+        return false;
+      } else if (this.options.captionSelector.startsWith('>')) {
+        var _selector = this.options.captionSelector.replace(/^>/, '').trimStart();
+        return elem.querySelector(_selector);
+      } else {
+        return elem.querySelector(this.options.captionSelector);
+      }
+    }
   }, {
     key: "generateQuerySelector",
     value: function generateQuerySelector(elem) {
@@ -580,7 +598,7 @@ var SimpleLightbox = /*#__PURE__*/function () {
         _this5.isOpen = true;
         var captionContainer, captionText;
         if (typeof _this5.options.captionSelector === 'string') {
-          captionContainer = _this5.options.captionSelector === 'self' ? _this5.relatedElements[_this5.currentImageIndex] : document.querySelector(_this5.generateQuerySelector(_this5.relatedElements[_this5.currentImageIndex]) + ' ' + _this5.options.captionSelector);
+          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]);
         }