https://www.dnevnik.si/static/required/js/se_lightbox.js

1window.lightboxItems = [];
2var lightboxLoaders = document.querySelectorAll('.se_image_lb');
3    var modal = document.querySelector('.modal');
4    var modalContent = document.querySelector('.modal-content');
5    var modalClose = document.querySelector('.modal-close');
6    var modalCaption = document.querySelector('.modal-caption'); 
7    var modalArrowPrev = modal.querySelector('.modal-arrow.modal-arrow-left');
8    var modalArrowNext = modal.querySelector('.modal-arrow.modal-arrow-right');
9window.seLightBoxIndex = 0;
10lightboxLoaders.forEach( function (target){ target.addEventListener('click', (e) => {
11
12  
13      window.seLightBoxIndex = 0;
14
15    // Check if thumbnails exist
16    var Thumbs = e.target.closest('.gallery');
17    if(Thumbs){
18        window.lightboxItems = Thumbs.querySelectorAll('.se-image__thumb');
19    }else{
20        window.lightboxItems = document.querySelectorAll('.se_image_lb');
21    }
22
23  if(window.lightboxItems.length == 0){
24  window.lightboxItems = document.querySelectorAll('.se_image_lb');
25}
26
27        var thumbSplit1 = e.target.src.split('/');
28      var targetMediaID = thumbSplit1[thumbSplit1.length-2];
29window.lightboxItems.forEach((node, index) => {
30          var thumbIndex =node.src.split('/');
31      var indexMediaID = thumbIndex[thumbSplit1.length-2];
32    if (targetMediaID === indexMediaID) {
33        window.seLightBoxIndex = index;
34    }
35});
36    
37  
38
39
40
41    openModal(window.seLightBoxIndex);
42
43    
44  
45  })
46})
47// Function to open the modal with a specific image and adjust its size
48    function openModal(index) {
49        modal.style.display = 'block';
50        const img = new Image();
51        let caption = findCaption(window.lightboxItems[index])
52        // console.log(modalCaption);
53        if (caption) {
54            modalCaption.innerHTML = caption.innerHTML
55        }
56         if(!(window.innerWidth <= 768)){
57            img.src = window.lightboxItems[index].dataset.lbDesktop;
58         }else{
59            img.src = window.lightboxItems[index].dataset.lbMobile;
60         }
61            console.log(img.src );
62
63        img.onload = () => {
64
65            /*
66            const imgWidth = img.width;
67            const imgHeight = img.height;
68            const viewportHeight = window.innerHeight * 0.85;
69            const viewportWidth = window.innerWidth * 0.85;
70            */
71
72            //set img width and height
73            //modalContent.style.width = imgWidth + 'px';
74            //modalContent.style.height = imgHeight + 'px';
75
76            modalContent.style.width = '100%';
77            modalContent.style.height = '100%';
78            modalContent.style.objectFit = 'contain';
79            modalContent.src = img.src;
80            window.seLightBoxIndex = index;
81
82            /*
83            if (imgHeight < viewportHeight) {
84                if (imgWidth < viewportWidth) {
85                    modalContent.style.height = (imgHeight / viewportHeight) * 100 + '%';
86                    modalContent.style.width = (imgWidth / viewportWidth) * 100 + '%';
87                } else {
88                    modalContent.style.width = '100%';
89                    modalContent.style.height = (imgWidth / viewportWidth) *100 + '%';
90                }
91            }else{
92                if (imgWidth < viewportWidth) {
93                    modalContent.style.width = (((imgHeight * viewportWidth) / viewportHeight) / viewportWidth) * 100 + '%';
94                    modalContent.style.height = '100%';
95                } else {
96                    modalContent.style.height = '100%';
97                    modalContent.style.width = (imgHeight / viewportHeight) * 100 + '%';
98                }
99            }
100            */
101
102        };
103
104        //solve arrows
105        if(index == window.lightboxItems.length-1){
106             modalArrowNext.style.display = 'none';
107        }else{
108             modalArrowNext.style.display = 'block';
109        }
110        if(index == 0){
111             modalArrowPrev.style.display = 'none';
112        }else{
113             modalArrowPrev.style.display = 'block';
114        }
115      
116    }
117    // Function to open the modal with a specific image
118    /*
119    function openModal(index) {
120        modal.style.display = 'block';
121        modalContent.src = lightboxItems[index].src;
122        seLightBoxIndex = index;
123    }
124    */
125
126    // Function to close the modal
127    function closeModal() {
128      window.lightboxItems = [];
129        modal.style.display = 'none';
130    }
131
132    function findNearestParentByTagName(element, tagName) {
133        let currentElement = element.parentElement;
134
135        while (currentElement) {
136            if (currentElement.tagName.toLowerCase() === tagName.toLowerCase()) {
137                return currentElement;
138            }
139            currentElement = currentElement.parentElement;
140        }
141
142        return null;
143    }
144
145    function findCaption(element) {
146      return element.closest('figure').parentElement.querySelector('.se-caption');
147      
148      /* let arr = findNearestParentByTagName(element, 'figure').parentElement.children
149        for (const item of arr) {
150            if (item.classList.contains('se-caption')) {
151                return item
152            }
153        }*/
154    }
155
156    // Event listeners
157    /*

158    lightboxItems.forEach((item, index) => {
159        item.addEventListener('click', () => {
160            openModal(index,lightboxItems);
161        });
162    });
163    */
164
165    //Functions were here
166modalClose.addEventListener('click', () => {
167        closeModal();
168    });
169
170    modal.addEventListener('click', (event) => {
171        if (event.target === modal) {
172            closeModal();
173        }
174    });
175
176    // Navigation with left and right arrow keys
177    document.addEventListener('keydown', (event) => {
178        if (modal.style.display === 'block') {
179            if (event.key === 'ArrowLeft') {
180                if (window.seLightBoxIndex > 0) {
181                    openModal(window.seLightBoxIndex - 1);
182                } else {
183                    //closeModal()
184                }
185            } else if (event.key === 'ArrowRight') {
186                if (window.seLightBoxIndex < window.lightboxItems.length - 1) {
187                    openModal(window.seLightBoxIndex + 1);
188                } else {
189                    //closeModal()
190                }
191            }
192        }
193    });
194    modalArrowNext.addEventListener('click', () => {
195        if (window.seLightBoxIndex < window.lightboxItems.length - 1) {
196            openModal(window.seLightBoxIndex + 1);
197        } else {
198            //closeModal()
199        }
200    })
201    modalArrowPrev.addEventListener('click', () => {
202        if (window.seLightBoxIndex > 0) {
203            openModal(window.seLightBoxIndex - 1);
204        } else {
205            //closeModal()
206        }
207    })