Slider hinter einem transparenten Bild

[Tommy Herrmann]

Moin Volker,

nö - dafür ist eine Lightbox unsinnig. Das ist ja nur ein Design-Effekt.

Um Bilder detailliert und vergrößert mit der Lightbox zu betrachten habe ich ja schon unendlich viele Slider und Galerien erstellt. Manchmal ist weniger auch mehr.

Dieser Slider stoppt auch bei Mausüber und hebt die Bilder ein wenig vor:

https://www.mobirise-tutorials.com/AI-B ... r-rotating

Die .mbrext Erweiterung findet ihr zum Download am Button unter dem Slider.

Slider Counter-Rotating.jpg

[Tommy Herrmann]

Moin,

habe nun doch noch eine Lightbox zu diesem Slider hinzugefügt, da ja die Bilder doch nur Ausschnitte zeigen und relativ klein sind.

Die Lightbox kann bei diesem Block ein- oder ausgeschaltet werden; ebenso kann die Hintergrundfarbe der Lightbox und deren Deckkraft über die Mobirise-Werkzeuge eingestellt werden.

Eine .mbrext Datei als Erweiterung findet ihr unter diesem Slider zum Download.

https://www.mobirise-tutorials.com/AI-B ... g-lightbox

Slider-Counter-Rotating-Lightbox.png

[struggle]

Ich habe mir mal erlaubt, den Slider (Paternoster horizontal) von Volker und das transparente Bild (Code) von Tommy zu nehmen. Das ist das Ergebnis: https://www.meinlangengrassau.de/ansichten

[Tommy Herrmann]

[struggle]

Hallo Tommy,
ich habe die mbrext Datei importiert, beim Anklicken öffnet sich zwar die Lightbox, aber es werden keine Bilder angezeigt.
Das sind die Einstellungen:

Unbenannt.PNG

und das ist das Ergebnis:

http://www.online2web.de/neun.html

[Tommy Herrmann]

Moin,

Du hast im Code ja auch nur die Bilder vom Slider (.png) eingetragen. Die gleichen verlinkten Bilder (oder eben auch andere) müssen dann auch noch händisch in den Lightbox-Bereich eingetragen werden.

Das werde ich noch nachholen, dass diese dann auch automatisch dort eingetragen werden.

Beispiel - alle .jpg Bilder fehlen:

<a href="assets/images/mbr-4.jpg" class="ai-lightbox-link" data-ai-index="0" data-ai-title="AI Bild 1">

Code: Alles auswählen

<div class="ai-slider-group">
    <div class="ai-slide-item"><a href="assets/images/mbr-4.jpg" class="ai-lightbox-link" data-ai-index="0" data-ai-title="AI Bild 1"><img src="assets/images/number-1.png" alt="AI Bild 1"></a></div>
    <div class="ai-slide-item"><a href="assets/images/mbr-7.jpg" class="ai-lightbox-link" data-ai-index="1" data-ai-title="AI Bild 2"><img src="assets/images/number-2.png" alt="AI Bild 2"></a></div>
    <div class="ai-slide-item"><a href="assets/images/mbr-8.jpg" class="ai-lightbox-link" data-ai-index="2" data-ai-title="AI Bild 3"><img src="assets/images/number-3.png" alt="AI Bild 3"></a></div>
    <div class="ai-slide-item"><a href="assets/images/mbr-6.jpg" class="ai-lightbox-link" data-ai-index="3" data-ai-title="AI Bild 4"><img src="assets/images/number-4.png" alt="AI Bild 4"></a></div>
    <div class="ai-slide-item"><a href="assets/images/mbr-1.jpg" class="ai-lightbox-link" data-ai-index="4" data-ai-title="AI Bild 5"><img src="assets/images/number-5.png" alt="AI Bild 5"></a></div>
    <div class="ai-slide-item"><a href="assets/images/mbr-5.jpg" class="ai-lightbox-link" data-ai-index="5" data-ai-title="AI Bild 6"><img src="assets/images/number-6.png" alt="AI Bild 6"></a></div>
</div>

[Tommy Herrmann]

Ja - sorry, da war ein Fehler im JavaScript-Teil der Lightbox im HTML-Bereich. Danke für den Hinweis

Ich habe den nur nicht bemerkt, da bei mir ja durch den Test von Beginn an alle Bilder drinnen waren, auch die der Lightbox.

Ich habe die .mbrext Datei dieser Erweiterung auf meiner Seite zum Download berichtigt:

https://www.mobirise-tutorials.com/AI-B ... g-lightbox

… oder Du tauscht nur den JavaScript-Teil der Lightbox mit dem neuen Script unten und füge dann die 6 Bilder neu in den Slider ein:

Code: Alles auswählen

    <!-- Lightbox -->
    <div class="ai-lightbox" aria-hidden="true">
        <button class="ai-lightbox-close" type="button" aria-label="Schließen">×</button>
        <button class="ai-lightbox-prev" type="button" aria-label="Vorheriges Bild">❮</button>
        <div class="ai-lightbox-content">
            <img class="ai-lightbox-image" src alt>
            <div class="ai-lightbox-caption">
                <span class="ai-lightbox-title"></span>
                <span class="ai-lightbox-count"></span>
            </div>
        </div>
        <button class="ai-lightbox-next" type="button" aria-label="Nächstes Bild">❯</button>
    </div>

    <script>
    (function () {
        const section = document.currentScript.closest('.ai-showcase');
        if (!section) return;

        const slider = section.querySelector('.ai-slider-full');
        const lightbox = section.querySelector('.ai-lightbox');
        const image = section.querySelector('.ai-lightbox-image');
        const title = section.querySelector('.ai-lightbox-title');
        const count = section.querySelector('.ai-lightbox-count');
        const closeBtn = section.querySelector('.ai-lightbox-close');
        const prevBtn = section.querySelector('.ai-lightbox-prev');
        const nextBtn = section.querySelector('.ai-lightbox-next');

        const allLinks = Array.from(section.querySelectorAll('.ai-lightbox-link'));
        const gallery = [];
        const preferredLinks = [];

        allLinks.forEach(function (link) {
            const index = parseInt(link.getAttribute('data-ai-index'), 10);
            if (!gallery[index]) {
                gallery[index] = {
                    link: link,
                    title: link.getAttribute('data-ai-title') || ''
                };
            }
        });

        let currentIndex = 0;

        function isEnabled() {
            return slider && slider.classList.contains('ai-lightbox-enabled');
        }

        function getImageData(index) {
            const data = gallery[index];
            const link = preferredLinks[index] || (data ? data.link : null);
            const img = link ? link.querySelector('img') : null;

            return {
                src: img && img.getAttribute('src') ? img.getAttribute('src') : (link ? link.getAttribute('href') : ''),
                title: link ? (link.getAttribute('data-ai-title') || (img ? img.getAttribute('alt') : '') || '') : ''
            };
        }

        function openLightbox(index, clickedLink) {
            if (!isEnabled()) return;
            currentIndex = index;
            preferredLinks[index] = clickedLink;
            updateLightbox();
            lightbox.classList.add('ai-lightbox-active');
            lightbox.setAttribute('aria-hidden', 'false');
        }

        function closeLightbox() {
            lightbox.classList.remove('ai-lightbox-active');
            lightbox.setAttribute('aria-hidden', 'true');
        }

        function updateLightbox() {
            const item = getImageData(currentIndex);
            if (!item || !item.src) return;

            image.src = item.src;
            image.alt = item.title;
            title.textContent = item.title;
            count.textContent = (currentIndex + 1) + ' / ' + gallery.length;
        }

        function prevImage() {
            currentIndex = (currentIndex - 1 + gallery.length) % gallery.length;
            updateLightbox();
        }

        function nextImage() {
            currentIndex = (currentIndex + 1) % gallery.length;
            updateLightbox();
        }

        allLinks.forEach(function (link) {
            link.addEventListener('click', function (event) {
                event.preventDefault();

                if (!isEnabled()) return;

                const index = parseInt(link.getAttribute('data-ai-index'), 10);
                openLightbox(index, link);
            });
        });

        closeBtn.addEventListener('click', closeLightbox);
        prevBtn.addEventListener('click', prevImage);
        nextBtn.addEventListener('click', nextImage);

        lightbox.addEventListener('click', function (event) {
            if (event.target === lightbox) {
                closeLightbox();
            }
        });

        document.addEventListener('keydown', function (event) {
            if (!lightbox.classList.contains('ai-lightbox-active')) return;

            if (event.key === 'Escape') closeLightbox();
            if (event.key === 'ArrowLeft') prevImage();
            if (event.key === 'ArrowRight') nextImage();
        });
    })();
    </script>

Bitte berichte dann …

[struggle]

Vielen Dank ! Ich werde zunächst das Script tauschen, dann aber noch die geänderte mbrext importieren.

[struggle]

Hat alles wunderbar funktioniert