start on lightbox

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({  });