Slideshow

[Bilder laden][> Slideshow][|| Stop]

 

 

 

[X][<][>]

 

(function() {

    var loadBtn  = document.getElementById('galleryLoadBtn');
    var playBtn  = document.getElementById('galleryPlayBtn');
    var stopBtn  = document.getElementById('galleryStopBtn');
    var statusEl = document.getElementById('galleryStatus');
    var debugEl  = document.getElementById('galleryDebug');
    var grid     = document.getElementById('galleryGrid');
    var lightbox = document.getElementById('galleryLightbox');
    var bigImg   = document.getElementById('galleryBig');
    var caption  = document.getElementById('galleryCaption');
    var prevBtn  = document.getElementById('galleryPrev');
    var nextBtn  = document.getElementById('galleryNext');
    var closeBtn = document.getElementById('galleryClose');
    var overlay  = document.getElementById('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) {
        statusEl.textContent = msg;
        statusEl.style.color = color || '#888';
    }

    function setDebug(msg) {
        debugEl.textContent = msg;
    }

    /* --- Page ID --- */
    function getPageId() {
        var pid = 0;
        /* Versuch 1: Deki.PageId */
        if (typeof Deki !== 'undefined') {
            if (Deki.PageId) { pid = Deki.PageId; }
            else if (Deki.Page && Deki.Page.Id) { pid = Deki.Page.Id; }
        }
        /* Versuch 2: Meta-Tag */
        if (!pid) {
            var metas = document.getElementsByTagName('meta');
            var i;
            for (i = 0; i < metas.length; i++) {
                if (metas[i].getAttribute('name') === 'page-id') {
                    pid = metas[i].getAttribute('content');
                    break;
                }
            }
        }
        /* Versuch 3: body data-attribut */
        if (!pid) {
            var body = document.getElementsByTagName('body')[0];
            if (body && body.getAttribute('data-page-id')) {
                pid = body.getAttribute('data-page-id');
            }
        }
        return pid;
    }

    /* --- Bilder laden --- */
    function loadImages() {
        var pageId = getPageId();
        setDebug('Page-ID: ' + (pageId ? pageId : 'NICHT GEFUNDEN') + '  |  URL: /@api/deki/pages/' + pageId + '/files?dream.out.format=xml');

        if (!pageId) {
            setStatus('Page-ID nicht gefunden!', '#ff4444');
            loadBtn.disabled = false;
            return;
        }

        loadBtn.disabled = true;
        setStatus('Lade...', '#7ecfff');
        grid.innerHTML = '';
        images = new Array();

        var xhr = new XMLHttpRequest();
        var apiUrl = '/@api/deki/pages/' + pageId + '/files?dream.out.format=xml';
        xhr.open('GET', apiUrl, true);
        xhr.onload = function() {
            setDebug('Page-ID: ' + pageId + '  |  HTTP: ' + xhr.status + '  |  Response-Laenge: ' + xhr.responseText.length);

            if (xhr.status !== 200) {
                setStatus('Fehler HTTP ' + xhr.status, '#ff4444');
                loadBtn.disabled = false;
                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 contentsNodes = nodes[i].getElementsByTagName('contents');
                var nameNodes     = nodes[i].getElementsByTagName('filename');
                if (!contentsNodes.length) continue;
                var url  = contentsNodes[0].getAttribute('href') || '';
                var name = nameNodes.length ? nameNodes[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 total: ' + nodes.length + '  |  Bilder gefiltert: ' + images.length);
            loadBtn.disabled = false;

            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 nicht erreichbar.', '#ff4444');
            setDebug('XHR onerror — API nicht erreichbar');
            loadBtn.disabled = false;
        };
        xhr.send();
    }

    /* --- Grid --- */
    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);
        }
    }

    /* --- Lightbox --- */
    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(); }

    /* --- Slideshow --- */
    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'; }
    }

    /* --- Events --- */
    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 {}