Add lightbox

app/assets/stylesheets/application.bootstrap.scss

@@ -28,13 +28,8 @@ $enable-rounded: false;
 
 @import 'bootstrap/scss/bootstrap';
 
-@font-face {
-  font-display: block;
-  font-family: "bootstrap-icons";
-  src: url("./bootstrap-icons.woff2") format("woff2"),
-    url("./bootstrap-icons.woff") format("woff");
-}
-
+$lg-path-images: "";
+$bootstrap-icons-font-dir: "";
 @import 'bootstrap-icons/font/bootstrap-icons';
 
 
@@ -52,6 +47,9 @@ $enable-rounded: false;
 
 @import "trix/dist/trix";
 
+$lg-path-fonts: "";
+
+@import "lightgallery/scss/lightgallery";
 /*
  * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
  * the trix-editor content (whether displayed or under editing). Feel free to incorporate this

app/javascript/controllers/index.js

@@ -48,3 +48,6 @@ application.register("toast", ToastController)
 
 import UnsavedChangesController from "./unsaved_changes_controller"
 application.register("unsaved-changes", UnsavedChangesController)
+
+import Lightbox from '@stimulus-components/lightbox'
+application.register('lightbox', Lightbox)

app/views/elements/_element.html.erb

@@ -24,14 +24,14 @@
           <%= element.description %>
         </div>
       <% end %>
-      <%= safe_display(element.screenshot.variant(:thumbnail)) do %> 
-        <%= image_tag(_1, class: "img-fluid", alt: "Screenshot des getesteten Elements") %>
+      <% safe_display(element.screenshot) do |s| %> 
+        <div data-controller="lightbox">
+          <%= link_to(s) do %>
+            <%= image_tag(s.variant(:thumbnail), class: "img-fluid", alt: "Screenshot des getesteten Elements") %>
+          <% end %>
+        </div>
       <% end %>
     </div>
-
-    <p class="actions">
-      
-    </p>
   <% end %>
 
   <div id="<%= dom_id(element, :success_criteria_list) %>" class="mb-3" data-controller="sortable" data-form-name="success_criterion" data-position-attribute= "position" data-draggable-selector=".draggable">