https://monstrafestival.com/wp-content/themes/mato-monstra-child-2…/monstra_expo_js.js?ver=09:31:32

1// // Get the modal
2// var modal = document.getElementById("myModal");
3
4// // Get the image and insert it inside the modal - use its "alt" text as a caption
5// var img = document.getElementById("myImg");
6// var modalImg = document.getElementById("img01");
7// var captionText = document.getElementById("caption");
8// img.onclick = function(){
9//   modal.style.display = "block";
10//   modalImg.src = this.src;
11//   captionText.innerHTML = this.alt;
12// }
13
14// // Get the <span> element that closes the modal
15// var span = document.getElementsByClassName("close")[0];
16
17// // When the user clicks on <span> (x), close the modal
18// span.onclick = function() {
19//   modal.style.display = "none";
20// } 
21
22let currentId;
23
24jQuery(".monstra_gallery_img").on("click",function(e){
25
26    console.log(e.currentTarget.id);
27
28    currentId = e.currentTarget.id;
29
30    let modal = document.getElementById("myModal");
31
32    let img = document.getElementById(currentId);
33
34    console.log(img);
35
36    let modalImg = document.getElementById("img01");
37
38    console.log(modalImg);
39
40    let captionText = document.getElementById("caption");
41
42    modal.style.display = "block";
43    modalImg.src = this.src;
44    captionText.innerHTML = this.alt;
45
46});
47
48jQuery(".close").on("click",function(e){
49
50    let modal = document.getElementById("myModal");
51    modal.style.display = "none";
52
53});
54
55jQuery(".next").on("click", function(e) {
56    let allGalleries = jQuery(".monstra_gallery_img");
57    let currentIndex = allGalleries.index(jQuery("#" + currentId));
58    let next = allGalleries[(currentIndex + 1) % allGalleries.length];
59    jQuery(next).trigger("click");
60    triggerAnim();
61});
62
63jQuery(".prev").on("click", function(e) {
64    let allGalleries = jQuery(".monstra_gallery_img");
65    let currentIndex = allGalleries.index(jQuery("#" + currentId));
66    let prev = allGalleries[(currentIndex - 1 + allGalleries.length) % allGalleries.length];
67    jQuery(prev).trigger("click");
68    triggerAnim();
69});
70
71function triggerAnim() {
72    let modalImg = document.getElementById("img01");
73    modalImg.classList.remove("fade");
74    void modalImg.offsetWidth; // force reflow so animation restarts
75    modalImg.classList.add("fade");
76}