ESST-Documentation/functions.js at main · StoneEnv/ESST-Documentation · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
document.addEventListener("DOMContentLoaded", function () {
  document.addEventListener("click", function (event) {
    if (event.target.matches(".lightbox-image")) {
      // console.warn({ event, src: event.target.src });

      // update the title with the alt (if it exists)
      document.getElementById("lightbox_modal_title").innerText = event.target
        .alt
        ? event.target.alt
        : "";

      const lightbox_modal_img = document.getElementById("lightbox_modal_img");

      // set the modal img src
      lightbox_modal_img.setAttribute("alt", event.target.alt);
      lightbox_modal_img.src = event.target.src;

      // open the modal
      lightbox_modal.showModal();
    }
  });
});

// //Change color on click
// document.addEventListener("DOMContentLoaded", function () {
//   const links = document.querySelectorAll("#scroll-links a");

//   links.forEach((link) => {
//     link.addEventListener("click", function () {
//       links.forEach((link) => link.classList.remove("active"));
//       this.classList.add("active");
//     });
//   });
// });

// // Modal

// document.addEventListener("DOMContentLoaded", function () {
//   const links = document.querySelectorAll("#scroll-links a");

//   links.forEach((link) => {
//     link.addEventListener("click", function () {
//       links.forEach((link) => link.classList.remove("active"));
//       this.classList.add("active");
//     });
//   });

//   // Modal functionality
//   const modal = document.querySelector(".modal");
//   const modalImg = document.querySelector(".modal-content");
//   const closeBtn = document.querySelector(".close");
//   const images = document.querySelectorAll("img[id^='myImg']");

//   images.forEach((img) => {
//     img.addEventListener("click", function () {
//       modal.style.display = "block";
//       modalImg.src = this.src;
//       captionText.innerHTML = this.alt; // Set the caption text to the alt attribute of the image
//     });
//   });

//   closeBtn.addEventListener("click", function () {
//     modal.style.display = "none";
//   });

//   // Close modal when clicking outside of the image
//   window.addEventListener("click", function (event) {
//     if (event.target === modal) {
//       modal.style.display = "none";
//     }
//   });
// });