Slideshow

[Bilder laden] (function() { /* Eindeutige Instanz via Timestamp — loest Duplikat-ID Problem */ var uid = 'gw_' + (new Date()).getTime(); var wrap = document.getElementById('gw_REPLACEID'); if (!wrap) { return; } wrap.id = uid; function q(cls) { return wrap.getElementsByClassName(cls)[0] || null; } var loadBtn = q('galleryLoadBtn'); var playBtn = q('galleryPlayBtn'); var stopBtn = q('galleryStopBtn'); var statusEl = q('galleryStatus'); var debugEl = q('galleryDebug'); var grid = q('galleryGrid'); var lightbox = q('galleryLightbox'); var bigImg = q('galleryBig'); var caption = q('galleryCaption'); var prevBtn = q('galleryPrev'); var nextBtn = q('galleryNext'); var closeBtn = q('galleryClose'); var overlay = q('galleryOverlay'); var images = new Array(); var currentIdx = 0; var slideTimer = null; var DELAY = 3000; var IMG_EXTS = 'jpg jpeg png gif bmp webp svg'; function setStatus(msg, color) { if (!statusEl) return; statusEl.textContent = msg; statusEl.style.color = color || '#888'; } function setDebug(msg) { if (!debugEl) return; debugEl.textContent = msg; } function getPageId() { var pid = 0; if (typeof Deki !== 'undefined') { if (Deki.PageId) { pid = Deki.PageId; } else if (Deki.Page && Deki.Page.Id) { pid = Deki.Page.Id; } } return pid; } function loadImages() { var pageId = getPageId(); setDebug('Page-ID: ' + (pageId ? pageId : 'NICHT GEFUNDEN')); if (!pageId) { setStatus('Page-ID nicht gefunden!', '#ff4444'); return; } loadBtn.disabled = true; setStatus('Lade...', '#7ecfff'); grid.innerHTML = ''; images = new Array(); var xhr = new XMLHttpRequest(); xhr.open('GET', '/@api/deki/pages/' + pageId + '/files?dream.out.format=xml', true); xhr.onload = function() { setDebug('Page-ID: ' + pageId + ' | HTTP: ' + xhr.status + ' | Bytes: ' + xhr.responseText.length); loadBtn.disabled = false; if (xhr.status !== 200) { setStatus('HTTP ' + xhr.status, '#ff4444'); return; } var parser = new DOMParser(); var xml = parser.parseFromString(xhr.responseText, 'text/xml'); var nodes = xml.getElementsByTagName('file'); var i; for (i = 0; i < nodes.length; i++) { var cNodes = nodes[i].getElementsByTagName('contents'); var nNodes = nodes[i].getElementsByTagName('filename'); if (!cNodes.length) continue; var url = cNodes[0].getAttribute('href') || ''; var name = nNodes.length ? nNodes[0].textContent : url; var ext = name.split('.').pop().toLowerCase(); if (IMG_EXTS.indexOf(ext) === -1) continue; var item = new Object(); item.url = url; item.name = name; images.push(item); } setDebug('Page-ID: ' + pageId + ' | Dateien: ' + nodes.length + ' | Bilder: ' + images.length); if (images.length === 0) { setStatus('Keine Bilder auf dieser Seite.', '#ff8c69'); return; } setStatus(images.length + ' Bild(er)', '#7fffb0'); renderGrid(); playBtn.style.display = 'inline-block'; }; xhr.onerror = function() { setStatus('API Fehler', '#ff4444'); setDebug('XHR onerror'); loadBtn.disabled = false; }; xhr.send(); } function renderGrid() { grid.innerHTML = ''; var i; for (i = 0; i < images.length; i++) { var img = document.createElement('img'); img.className = 'galleryThumb'; img.alt = images[i].name; img.src = images[i].url; (function(idx) { img.onclick = function() { openLightbox(idx); }; })(i); grid.appendChild(img); } } function openLightbox(idx) { currentIdx = idx; updateLightbox(); lightbox.style.display = 'block'; } function updateLightbox() { bigImg.src = ''; bigImg.src = images[currentIdx].url; caption.textContent = (currentIdx + 1) + ' / ' + images.length + ' -- ' + images[currentIdx].name; var thumbs = grid.getElementsByTagName('img'); var i; for (i = 0; i < thumbs.length; i++) { thumbs[i].className = i === currentIdx ? 'galleryThumb gActive' : 'galleryThumb'; } } function closeLightbox() { stopSlideshow(); lightbox.style.display = 'none'; if (images.length) { playBtn.style.display = 'inline-block'; } stopBtn.style.display = 'none'; } function showNext() { currentIdx = (currentIdx + 1) % images.length; updateLightbox(); } function showPrev() { currentIdx = (currentIdx - 1 + images.length) % images.length; updateLightbox(); } function startSlideshow() { if (lightbox.style.display !== 'block') { openLightbox(0); } playBtn.style.display = 'none'; stopBtn.style.display = 'inline-block'; slideTimer = setInterval(function() { showNext(); }, DELAY); } function stopSlideshow() { if (slideTimer) { clearInterval(slideTimer); slideTimer = null; } stopBtn.style.display = 'none'; if (images.length) { playBtn.style.display = 'inline-block'; } } loadBtn.onclick = function() { loadImages(); }; playBtn.onclick = function() { startSlideshow(); }; stopBtn.onclick = function() { stopSlideshow(); }; closeBtn.onclick = function() { closeLightbox(); }; overlay.onclick = function() { closeLightbox(); }; prevBtn.onclick = function() { showPrev(); }; nextBtn.onclick = function() { showNext(); }; document.onkeydown = function(e) { if (lightbox.style.display !== 'block') return; var k = e.keyCode; if (k === 37) { showPrev(); } else if (k === 39) { showNext(); } else if (k === 27) { closeLightbox(); } }; })(); NoElements {}