bootstrap-lightbox-gallery - npm Package Compare versions

Comparing version 1.0.7 to 1.0.8

package.json

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

README.md

@@ -18,1 +18,45 @@ # bootstrap-lightbox-gallery
 
+## Usage
+
+Show the images in the page as figures with (optional hidden) caption.
+
+```html
+<a href="https://via.placeholder.com/1024x768" data-gallery="gallery-1" class="d-block">
+    <figure>
+        <img src="https://via.placeholder.com/1024x768" class="img-fluid" alt="Lorem ipsum dolor sit amet"/>
+        <figcaption class="visually-hidden">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        </figcaption>
+    </figure>
+</a>
+<a href="https://via.placeholder.com/768x1024" data-gallery="gallery-1" class="d-block">
+    <figure>
+        <img src="https://via.placeholder.com/768x1024" class="img-fluid" alt="Quick brown fox jumps">
+        <figcaption class="visually-hidden">
+            Quick brown fox jumps over the lazy dog. All their equipment and instruments are alive.
+        </figcaption>
+    </figure>
+</a>
+<!-- [...] -->
+```
+
+Create the LightboxGallery instance.
+
+```html
+<!-- add `bootstrap-lightbox-gallery`, `cm-web-modules` and `bootstrap-show-modal` to your importmap (if no transpiler is used) -->
+<script type="importmap">
+    {
+        "imports": {
+            "bootstrap-lightbox-gallery/": "./node_modules/bootstrap-lightbox-gallery/",
+            "cm-web-modules/": "./node_modules/cm-web-modules/",
+            "bootstrap-show-modal/": "./node_modules/bootstrap-show-modal/"
+        }
+    }
+</script>
+<!-- create the LightboxGallery -->
+<script type="module">
+    import {LightboxGallery} from "bootstrap-lightbox-gallery/src/LightboxGallery.js"
+
+    new LightboxGallery(document.querySelectorAll("[data-gallery='gallery-1']"), {title: "My Gallery"})
+</script>
+```

src/LightboxGallery.js

@@ -13,4 +13,3 @@ /**
         this.props = {
-            id: "lightboxGallery",
-            props: undefined
+            id: "lightboxGallery" // change this, if you have multiple galleries on one page
         }
@@ -17,0 +16,0 @@ Object.assign(this.props, props)

No alert changes

Improved metrics

Total package byte prevSize

27794

increased by6.3%

Number of lines in readme file

62

increased by244.44%

Worsened metrics

Lines of code

96

decreased by-1.03%

No dependency changes