https://content.meteoblue.com/assets/js/lightbox_replace-rev3.js

1document.addEventListener("DOMContentLoaded", function () {
2
3    /* Get all images to replace with lightboxes and loop through them */
4    let toReplace = document.querySelectorAll(".lb_zoom, .lb_link");
5    let checkStrings = [
6        "thumb",
7        "one_column_of_three",
8        "two_columns_of_three",
9        "one_column_of_four",
10        "two_columns_of_four",
11        "three_columns_of_four",
12        "all_columns",
13        "large",
14        "medium",
15        "small",
16        "lightbox"
17    ]
18
19    for (let i = 0; i < toReplace.length; i++) {
20        let imgClasses = toReplace[i].classList;
21        let imgThumb = toReplace[i].src;
22        let imgLb = "";
23
24        if (toReplace[i].tagName === 'A') {
25            toReplace[i].classList.add("zoom_or_link_image");
26            toReplace[i].dataset.lightbox = "image";
27        } else {
28            /* Extract classes, thumbnail- and lightbox-image-names, caption */
29            var found = false;
30            for (suffix in checkStrings) {
31                if (imgThumb.includes(checkStrings[suffix])) {
32                    found = true
33                    imgLb = imgThumb.replace(checkStrings[suffix], 'lightbox');
34                }
35            }
36
37            if (found === false) {
38                imgLb = imgThumb;
39            }
40        }
41
42        let imgCaption = toReplace[i].alt;
43
44        /* Create a-, img-, span- and div-elements and add classes/attributes */
45        let lbDiv = document.createElement('div');
46
47        let lbCaption = document.createElement('div');
48        lbCaption.classList.add("image-caption");
49        lbCaption.innerHTML = imgCaption;
50
51        for (let j = 0; j < imgClasses.length; j++) {
52            if (imgClasses[j] == "lb_center_caption") {
53                lbCaption.classList.add("image-caption-center");
54            } else {
55                lbDiv.classList.add(imgClasses[j]);
56            }
57        }
58
59        lbDiv.classList.add("image");
60
61        let lbA = document.createElement('a');
62        lbA.classList.add("zoom_or_link_image");
63        lbA.title = imgCaption;
64
65        let lbImg = document.createElement('img');
66        lbImg.src = imgThumb;
67        lbImg.alt = imgCaption;
68        lbImg.title = imgCaption;
69
70        let lbSpan = document.createElement('span');
71
72        /* Add zoom-/link-specific classes/attributes */
73        if (imgClasses.contains("lb_zoom")) {
74            lbSpan.classList.add("zoom-icon");
75            lbA.href = imgLb;
76            lbA.dataset.title = imgCaption;
77            lbA.setAttribute("data-lightbox", "image");
78        } else {
79            lbSpan.classList.add("link-icon");
80            lbA.href = toReplace[i].dataset.link;
81        }
82        if (imgClasses.contains("lb_radius")) {
83            lbImg.classList.add("radius");
84        }
85
86        /* Assemble and replace original img-element with created one */
87        lbA.appendChild(lbImg);
88        lbA.appendChild(lbSpan);
89        lbDiv.appendChild(lbA);
90
91        if (lbCaption.innerHTML.length !== 0) {
92            lbDiv.appendChild(lbCaption);
93        }
94
95        toReplace[i].parentNode.replaceChild(lbDiv, toReplace[i]);
96    }
97});