start on lightbox

app/helpers/members_helper.rb

@@ -1,11 +1,7 @@
 module MembersHelper
 
   def picture_for(someone , classes = "")
-    if someone.picture.blank?
-      image = asset_url("no_image.png")
-    else
-      image = someone.picture.url
-    end
+    image = someones_path(someone)
     if someone.respond_to? :name
       alt = someone.name
     else
@@ -14,6 +10,13 @@ module MembersHelper
     image_tag(image , alt: alt , class: classes )
   end
 
+  def someones_path( someone )
+    if someone.picture.blank?
+      asset_url("no_image.png")
+    else
+      someone.picture.url
+    end
+  end
   def stayed(member)
     return "Not arrived" if member.arrived.blank?
     text = member.arrived.to_s

app/views/pictures/_picture.haml

@@ -5,7 +5,9 @@
       = distance_of_time_in_words_to_now picture.happened
       ago
   .h-0.overflow-hidden.relative{class: "pt-[75%]"}
-    = picture_for( picture , "absolute top-0 left-0 w-full h-full inset-0 object-cover hover:scale-105 ease-in duration-500")
+    =link_to someones_path( picture ) , {class: :glightbox ,
+        "data-glightbox" => "title: #{picture.text}" } do
+      = picture_for( picture , "absolute top-0 left-0 w-full h-full inset-0 object-cover hover:scale-105 ease-in duration-500")
   -unless picture.text.blank?
     .absolute.bottom-0.left-0.right-0.px-4.pb-1.bg-gray-800.opacity-70.transition-colors.group-hover:bg-black.group-hover:opacity-100
       .text-center.mt-2.text-white= picture.text

app/views/pictures/index.html.haml

@@ -1,3 +1,6 @@
+%link{:href => "https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css", :rel => "stylesheet"}/
+%script{:src => "https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"}
+
 = paginate @pictures
 
 .flex.justify-end.mr-10
@@ -9,9 +12,10 @@
   - @pictures.each do |picture|
     = render picture , picture: picture
 
-%br
-
 .flex.ml-20
   = link_to new_picture_path do
     %button.bg-cyan-200.mr-3.inline-block.rounded-lg.px-4.py-3.text-md.font-medium.border.border-gray-400
       New Picture
+
+:javascript
+  const lightbox = GLightbox({  });