lightbox diaporama site

web/themes/custom/quartiers_de_demain/templates/field--paragraph--site-diapo.html.twig

@@ -74,5 +74,11 @@
     {% if multiple %}
       </div>
     {% endif %}
+    <div id="lightbox" class="lightbox">
+      <span class="close">&times;</span>
+      <img class="lightbox-content" id="lightbox-img">
+      <a class="prev" id="prev">&#10094;</a>
+      <a class="next" id="next">&#10095;</a>
+    </div>
   </div>
 {% endif %}

web/themes/custom/quartiers_de_demain/templates/image.html.twig

@@ -0,0 +1,15 @@
+{#
+/**
+ * @file
+ * Default theme implementation of an image.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the img tag.
+ * - style_name: (optional) The name of the image style applied.
+ *
+ * @see template_preprocess_image()
+ *
+ * @ingroup themeable
+ */
+#}
+<img class="lightbox-trigger" {{ attributes }} />