https://horyinfo.cz/image/horyinfo/horyinfo-glightbox.js?v=3

1/* horyinfo-glightbox.js
2   Napojení GLightboxu na Horyinfo:
3   1) Fotky přímo na stránce (články, cokoli s <a rel="lightbox"> i skupinové rel="lightbox[id]").
4   2) Galerie fotek u cesty: odkazy "foto:" / "topo:" (#fotos, #fotos_topo) se místo starého
5      vyskakovacího okna stáhnou z viewimages.php na pozadí a otevřou rovnou v GLightboxu
6      (swipe na mobilu). Když cokoli selže, chová se to jako dřív (otevře stránku s fotkami).
7   3) Responzivní iframy (YouTube, Google Mapy…): podle atributů width/height nastaví
8      aspect-ratio, aby se na úzké obrazovce zmenšovaly proporčně a nekolabovaly na 150 px.
9   Vyžaduje pouze GLightbox (glightbox.min.js), žádné jQuery/prototype.
10*/
11(function () {
12    function ready(fn) {
13        if (document.readyState !== 'loading') { fn(); }
14        else { document.addEventListener('DOMContentLoaded', fn); }
15    }
16
17    // "Popisek --- autor: Jméno"  ->  "Popisek — Jméno" (a když autor chybí, jen "Popisek")
18    function cleanTitle(t) {
19        return (t || '').replace(/\s*---\s*autor:\s*/i, ' — ').replace(/\s*—\s*$/, '').trim();
20    }
21
22    /* FB post embed má obsah napevno (&width=NNN), takže zmenšení iframu ho jen ořízne.
23       Proto ho obalíme a zmenšíme CELÝ přes transform:scale — zůstane celý vidět, jen menší.
24       Obal drží správnou (zmenšenou) velikost, ať sedí layout; přepočítá se i při změně okna. */
25    function fitFbIframe(f, w, h) {
26        var wrap = document.createElement('div');
27        wrap.className = 'hi-fb-wrap';
28        wrap.style.overflow = 'hidden';
29        wrap.style.margin = '0 auto';
30        f.parentNode.insertBefore(wrap, f);
31        wrap.appendChild(f);
32        // iframe musí zůstat ve své přirozené velikosti (přebít responzivní pravidla), scale řeší zmenšení
33        f.style.transformOrigin = 'top left';
34        f.style.setProperty('width', w + 'px', 'important');
35        f.style.setProperty('height', h + 'px', 'important');
36        f.style.setProperty('max-width', 'none', 'important');
37        function fit() {
38            var host = wrap.parentNode;
39            var avail = (host && host.clientWidth) ? host.clientWidth : w;
40            var scale = avail < w ? (avail / w) : 1;
41            f.style.transform = scale < 1 ? ('scale(' + scale + ')') : 'none';
42            wrap.style.width = Math.round(w * scale) + 'px';
43            wrap.style.height = Math.round(h * scale) + 'px';
44        }
45        fit();
46        if (window.addEventListener) { window.addEventListener('resize', fit); }
47    }
48
49    ready(function () {
50        /* 0) Responzivní iframy (YouTube, Mapy…): z atributů width/height nastavíme
51           aspect-ratio, ať se na úzké obrazovce zmenšují proporčně místo kolapsu na 150 px.
52           Bere jen iframy s číselnými rozměry v atributech (FB má rozměry v style → vynecháme). */
53        document.querySelectorAll('iframe[width][height]').forEach(function (f) {
54            var wa = f.getAttribute('width'), ha = f.getAttribute('height');
55            if (!/^\d+$/.test(wa) || !/^\d+$/.test(ha)) { return; }
56            if (/facebook\.com/.test(f.src || '')) {
57                // FB post embed: obsah má pevnou šířku → zmenšit celý widget (jinak by se ořízl)
58                fitFbIframe(f, parseInt(wa, 10), parseInt(ha, 10));
59            } else {
60                // Mapy, YouTube…: obsah se přizpůsobí velikosti iframu → stačí poměr stran
61                f.style.aspectRatio = wa + ' / ' + ha;
62                f.style.maxWidth = '100%';
63                f.style.height = 'auto';
64            }
65        });
66
67        if (!window.GLightbox) { return; }
68
69        /* 1) fotky přímo na stránce (články apod.) */
70        var inline = document.querySelectorAll('a[rel^="lightbox"]');
71        inline.forEach(function (a) {
72            var t = cleanTitle(a.getAttribute('title'));
73            if (t && !a.getAttribute('data-title')) { a.setAttribute('data-title', t); }
74        });
75        if (inline.length) { GLightbox({ selector: 'a[rel^="lightbox"]', loop: true }); }
76
77        /* 2) galerie fotek u cesty (foto: / topo:) */
78        document.querySelectorAll('a#fotos, a#fotos_topo').forEach(function (link) {
79            var url = link.getAttribute('href');
80            if (!url) { return; }
81            link.removeAttribute('onclick');

81   // zrušit starý popup (openNewWindow)
82            link.onclick = null;
83            link.addEventListener('click', function (e) {
84                e.preventDefault();
85                if (!window.fetch) { window.location = url; return; }   // starý prohlížeč → otevři postaru
86                fetch(url)
87                    .then(function (r) { return r.text(); })
88                    .then(function (html) {
89                        var doc = new DOMParser().parseFromString(html, 'text/html');
90                        var elements = [];
91                        doc.querySelectorAll('a[rel^="lightbox"]').forEach(function (a) {
92                            var href = a.getAttribute('href');
93                            if (href) { elements.push({ href: href, type: 'image', title: cleanTitle(a.getAttribute('title')) }); }
94                        });
95                        if (!elements.length) { window.location = url; return; }
96
97                        // Vytvoříme skryté <a> odkazy a otevřeme GLightbox přes SELEKTOR.
98                        // To je jeho nejspolehlivější režim; dynamické "elements" mají chybu,
99                        // kdy první snímek zůstane černý, dokud nepřepneš na další.
100                        var wrap = document.createElement('div');
101                        wrap.style.display = 'none';
102                        wrap.className = 'hi-cesta-galerie';
103                        elements.forEach(function (el) {
104                            var a = document.createElement('a');
105                            a.href = el.href;
106                            a.className = 'hi-cesta-foto-item';
107                            if (el.title) { a.setAttribute('data-title', el.title); }
108                            wrap.appendChild(a);
109                        });
110                        document.body.appendChild(wrap);
111
112                        var gl = GLightbox({ selector: '.hi-cesta-foto-item', loop: true });
113                        gl.on('close', function () {
114                            gl.destroy();
115                            if (wrap.parentNode) { wrap.parentNode.removeChild(wrap); }
116                        });
117                        gl.openAt(0);
118                        // pojistka: drobné překreslení, ať první snímek hned sedne
119                        setTimeout(function () {
120                            try { window.dispatchEvent(new Event('resize')); } catch (err) {}
121                        }, 100);
122                    })
123                    .catch(function () { window.location = url; });
124            });
125        });
126    });
127})();