bootstrap-lightbox-gallery - npm Package Compare versions

Comparing version 1.0.13 to 1.0.14

package.json

 {
   "name": "bootstrap-lightbox-gallery",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "A nice lightbox gallery component for Bootstrap 5",
@@ -5,0 +5,0 @@ "browser": "./src/bootstrap-input-spinner.js",

README.md

@@ -61,9 +61,26 @@ # bootstrap-lightbox-gallery
 <!-- create the LightboxGallery -->
+<!-- new LightboxGallery(context, props) -->
 <script type="module">
     import {LightboxGallery} from "bootstrap-lightbox-gallery/src/LightboxGallery.js"
 
-    new LightboxGallery(document.querySelectorAll("[data-gallery='gallery-1']"), {title: "My Gallery"})
+    new LightboxGallery(document.querySelectorAll("[data-gallery='gallery-1']"), 
+            {
+                id: "gallery-45c11a", // set this, if you have multiple galleries on one page
+                title: "My Lightbox Gallery", // set the name, it will be displayed
+                backgroundTheme: "dark" // set to "light", if you want to display the images on light background
+            })
 </script>
 ```
 
+#### Properties
+
+```js
+this.props = {
+    id: "lightboxGallery", // change this, if you have multiple galleries on one page
+    backgroundTheme: "dark" // set to "light", if you want to display the images on light background 
+}
+```
+
+new LightboxGallery(document.querySelectorAll("[data-gallery='gallery-1']"), {title: "My Gallery"})
+
 ---
@@ -70,0 +87,0 @@

src/LightboxGallery.js

@@ -13,5 +13,8 @@ /**
         this.props = {
-            id: "lightboxGallery" // change this, if you have multiple galleries on one page
+            id: "lightboxGallery", // change this, if you have multiple galleries on one page
+            title: "Lightbox Gallery", // set the name, it will be displayed
+            theme: "dark" // set to "light", if you want to display the images on light background
         }
         Object.assign(this.props, props)
+        this.props.isDark = props.theme === "dark"
         this.state = {
@@ -43,3 +46,3 @@ title: props.title,
             if (itemData.caption) {
-                caption = `<div class="rounded carousel-caption p-2 text-light bg-dark bg-opacity-50">
+                caption = `<div class="rounded carousel-caption p-2 ${this.props.isDark ? "text-light bg-dark" : "text-body bg-light"} bg-opacity-50">
                              ${itemData.caption}
@@ -50,3 +53,3 @@ </div>`
                 <div class="carousel-item h-100" data-bs-index="${this.state.itemCount}">
-                    <div class="d-flex align-items-center h-100 w-100 bg-dark">
+                    <div class="d-flex align-items-center h-100 w-100 ${this.props.isDark ? "bg-dark" : "bg-white"}">
                         <img src="${itemData.url}" class="d-block mx-auto img-fluid" title="${itemData.title}" alt="${itemData.alt}"/>
@@ -64,7 +67,7 @@ ${caption}
   </div>
-  <button style="filter: invert(1) grayscale(100);" class="carousel-control-prev" type="button" data-bs-target="#${this.props.id}" data-bs-slide="prev">
+  <button style="filter: invert(1) grayscale(100)" class="carousel-control-prev" type="button" data-bs-target="#${this.props.id}" data-bs-slide="prev">
     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
     <span class="visually-hidden">Vorheriges Bild</span>
   </button>
-  <button style="filter: invert(1) grayscale(100);"  class="carousel-control-next" type="button" data-bs-target="#${this.props.id}" data-bs-slide="next">
+  <button style="filter: invert(1) grayscale(100)"  class="carousel-control-next" type="button" data-bs-target="#${this.props.id}" data-bs-slide="next">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
@@ -87,3 +90,3 @@ <span class="visually-hidden">Nächstes Bild</span>
             this.modal = bootstrap.showModal({
-                theme: "dark",
+                theme: this.props.isDark ? "dark" : undefined,
                 title: this.state.title + " <small class='text-muted ms-3 pb-1 carousel-index'></small>",
@@ -90,0 +93,0 @@ headerClass: "border-0",

No alert changes

Improved metrics

Total package byte prevSize

29145

increased by3.84%

Lines of code

99

increased by3.13%

Number of lines in readme file

89

increased by23.61%

No dependency changes