Narrative web: lightbox feature (#1410)

Deature request: #012801
Discourse: https://gramps.discourse.group/t/narrated-website-browsing-media-in-person-page/3195

data/css/lightbox.js

@@ -0,0 +1,60 @@
+/*
+#
+# Gramps - a GTK+/GNOME based genealogy program
+#
+# Copyright 2023-     Serge Noiraud
+#
+# This program is free software; you can redistribute it and/or modify
+# it under the terms of the GNU General Public License as published by
+# the Free Software Foundation; either version 2 of the License, or
+# (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful, 
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
+#
+
+**************************************************************************************************
+GRAMPS javascript for lightbox feature
+Style Name: n/a (used by many different styles)
+Javascript Author: Serge Noiraud based on W3C: https://www.w3schools.com/howto/howto_js_lightbox.asp
+**************************************************************************************************/
+
+// Open the Modal
+function openModal() {
+  document.getElementById("MediaModal").style.display = "block";
+}
+
+// Close the Modal
+function closeModal() {
+  document.getElementById("MediaModal").style.display = "none";
+}
+
+var slideIndex = 1;
+showSlides(slideIndex);
+
+// Next/previous controls
+function plusSlides(n) {
+  showSlides(slideIndex += n);
+}
+
+// Thumbnail image controls
+function currentSlide(n) {
+  showSlides(slideIndex = n);
+}
+
+function showSlides(n) {
+  var i;
+  var slides = document.getElementsByClassName("MediaSlide");
+  if (n > slides.length) {slideIndex = 1}
+  if (n < 1) {slideIndex = slides.length}
+  for (i = 0; i < slides.length; i++) {
+    slides[i].style.display = "none";
+  }
+  slides[slideIndex-1].style.display = "block";
+}