question-circle [SOLVED] UIKit 3 Slider: navigation missing (lightbox mode)

  • Posts: 6
  • Thank you received: 1

UIKit 3 Slider: navigation missing (lightbox mode) was created by pixelhexe

Ich nutze das Modul "UIkit 3 Slider" unter Joomla TP Perfect mit Astroid Framework 2.5.2.
Funktioniert soweit wunderbar. Aber wenn ich in der Modul-Konfiguration "Lightbox Image" auf "Ja" schalte, um die Vergrößerungsfunktion zu aktivieren, kann ich dort nicht zum vorigen oder nächsten Bild navigieren.
Man muss also jedes Mal das vergrößerte Bild schließen, um dann das nächste Bild anklicken zu können für die nächste vergrößerte Ansicht ...

Zunächst dachte ich, es liegt innerhalb des DIVs "uk-lightbox-panel" an der CSS-Klasse "uk-hidden", die den "button links" mit der Klasse "uk-lightbox-button" angehängt wird - aber selbst wenn ich diese via JavaScript einblende, tut sich nichts bei Klick auf den Vor- oder Zurück-Pfeil.

Gibt es hierfür vielleicht einen Workaround?
Beispiel siehe
www.cadida.de/karriere
Abschnitt "Räumlichkeiten"
Vielen Dank!
2 years 3 months ago #1

Please Log in or Create an account to join the conversation.

  • Posts: 8776
  • Thank you received: 1732

Replied by joomlaplates on topic UIKit 3 Slider: navigation missing (lightbox mode)

Hallo,
wenn das Bild inn der Lightbox öffnet, könne sie natürlich nicht mehr navigieren.
Das Bild muss immer erst geschlossen.
2 years 3 months ago #2

Please Log in or Create an account to join the conversation.

  • Posts: 6
  • Thank you received: 1

Replied by pixelhexe on topic UIKit 3 Slider: navigation missing (lightbox mode)

Vielen Dank für Ihre Rückmeldung - schade.
Eigentlich sollte es ja funktionieren wie in der Demo unter

getuikit.com/docs/lightbox

Aber dazu müsste offenbar der Code Ihres Sliders angepasst werden. Vielleicht eine Anregung fürs nächste Update?
2 years 3 months ago #3

Please Log in or Create an account to join the conversation.

  • Posts: 6
  • Thank you received: 1

Replied by pixelhexe on topic UIKit 3 Slider: navigation missing (lightbox mode)

Ich habe jetzt eine Möglichkeit gefunden, den Slider mit der Lightbox so zu kombinieren, dass man auch in der vergrößerten Lightbox-Ansicht vor und zurück blättern kann: Über ein Template-Override der Datei
\modules\mod_uk_slider\tmpl\default.php

Dazu habe ich dort folgendes JavaScript ergänzt, mit dem die Lightbox in der Zoom-Ansicht dynamisch erzeugt werden kann:
    docReady(function() {
        let imageZooms = document.querySelectorAll('.companypics li');
        let images = document.querySelectorAll('.companypics img');
        let util = UIkit.util;

        imageZooms.forEach(function(item, index) {
            let imgSrc = item.querySelector('img').src;

            item.addEventListener('click', hideTotop, false);

            util.on(item, 'click', function(e) {
                e.preventDefault();
                let items = [];

                for (let i = 0; i < images.length; i++) {
                    items.push({
                        source: images[i].src
                    });
                }

                itemsSorted1 = items.slice(index);
                itemsSorted2 = items.slice(0, index);
                items = itemsSorted1.concat(itemsSorted2);
                let lightbox = UIkit.lightboxPanel({
                    items
                });
                lightbox.show();
            });
        })

        function hideTotop() {
            let totop = document.querySelector("#astroid-backtotop");
            if (totop) {
                totop.style.zIndex = 0;
            }
            setTimeout(
                slideNav, 2);

            function slideNav() {
                let navButtons = document.querySelectorAll('.uk-lightbox-button');
                navButtons.forEach(function(button) {
                    if (button.classList.contains("uk-hidden")) {
                        button.style.cssText += ";display:block!important";
                    }
                })
            }
        }
    });

    function docReady(fn) {
        if (document.readyState === "complete" || document.readyState === "interactive") {
            setTimeout(fn, 1);
        } else {
            document.addEventListener("DOMContentLoaded", fn);
        }
    }

Da auf der Seite noch eine weitere Slideshow läuft, habe ich außerdem im Modul eine individuelle "General slider class" namens "companypics" vergeben, die im Script vorkommt (kann sonst durch den Standardwert "uk-slider-items" ersetzt werden). Zunächst hatte dies keine Auswirkungen. Hier muss die Zeile 78

<ul class="uk-grid-match uk-slider-items <?php echo $classes; ?>" uk-grid>

so ergänzt werden:

<ul class="uk-grid-match uk-slider-items <?php echo $classes . ' ' . $slider_class; ?>" uk-grid>

Geholfen hatte mir: getuikit.com/assets/uikit/tests/lightbox.html
Funktioniert nun erstmal wie gewünscht.
2 years 2 months ago #4

Please Log in or Create an account to join the conversation.

  • Posts: 6
  • Thank you received: 1

Replied by pixelhexe on topic [SOLVED] UIKit 3 Slider: navigation missing (lightbox mode)

Problem solved.
The following user(s) said Thank You: joomlaplates
2 years 2 months ago #5

Please Log in or Create an account to join the conversation.

Moderators: joomlaplates

Installations-Service

Don´t waste your time, we install your purchased Template
with the "Demo Content" within the next 24 hours.

Buy Now - 59€

Joomlaplates/Theme-Point is not affiliated with or endorsed by Open Source Matters or the Joomla! Project

Copyright © 2022 JoomlaPlates | Professional Joomla Templates with Uikit 3

Disclaimer & Privacy | License