instatiate lightbox only when needed, slight hack

app/javascript/application.js

@@ -1,4 +1,10 @@
-// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
-import GLightbox from 'glightbox';
+// Configure your import map in config/importmap.rb.
+// Read more: https://github.com/rails/importmap-rails
 
-const lightbox = GLightbox({  });
+// Currently haml filter does not support modules.
+// import and make global as workaround
+//
+// haml module syntax is really clunky, filing issue and hoping
+//
+import GLightbox from 'glightbox';
+globalThis.GLightbox = GLightbox;

app/views/members/show.html.haml

@@ -47,3 +47,7 @@
           = link_to edit_picture_path(picture) do
             %button.bg-cyan-200.mr-3.inline-block.rounded-lg.px-4.py-3.text-md.font-medium.border.border-gray-400
               Edit Picture
+:javascript
+  document.addEventListener("DOMContentLoaded", function(event) {
+    const lightbox = GLightbox({  });
+  });

app/views/merged/view/_section_pictures.haml

@@ -1,3 +1,8 @@
 .mx-20.grid.grid-cols-1.md:grid-cols-2.lg:grid-cols-3.2xl:grid-cols-4.gap-8.md:gap-12.lg:gap-16
   - Picture.all.limit(4).each do |picture|
     = render "pictures/picture" , picture: picture
+
+:javascript
+    document.addEventListener("DOMContentLoaded", function(event) {
+      const lightbox = GLightbox({  });
+    });

app/views/pictures/index.html.haml

@@ -16,3 +16,6 @@
       New Picture
 
 :javascript
+    document.addEventListener("DOMContentLoaded", function(event) {
+      const lightbox = GLightbox({  });
+    });