en EN de DE
Welcome, Guest
Username: Password: Remember me

TOPIC: [SOLVED] UIKit 3 Slider: navigation missing (lightbox mode)

UIKit 3 Slider: navigation missing (lightbox mode) 4 months 1 week ago #1

  • pixelhexe
  • pixelhexe's Avatar
  • Offline
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!
The administrator has disabled public write access.

UIKit 3 Slider: navigation missing (lightbox mode) 4 months 1 week ago #2

  • joomlaplates
  • joomlaplates's Avatar
  • Offline
Hallo,
wenn das Bild inn der Lightbox öffnet, könne sie natürlich nicht mehr navigieren.
Das Bild muss immer erst geschlossen.
The administrator has disabled public write access.

UIKit 3 Slider: navigation missing (lightbox mode) 4 months 1 week ago #3

  • pixelhexe
  • pixelhexe's Avatar
  • Offline
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?
The administrator has disabled public write access.

UIKit 3 Slider: navigation missing (lightbox mode) 3 months 1 week ago #4

  • pixelhexe
  • pixelhexe's Avatar
  • Offline
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.
The administrator has disabled public write access.

[SOLVED] UIKit 3 Slider: navigation missing (lightbox mode) 3 months 1 week ago #5

  • pixelhexe
  • pixelhexe's Avatar
  • Offline
Problem solved.
The administrator has disabled public write access.
The following user(s) said Thank You: joomlaplates
Moderators: joomlaplates

Einzelnes Theme ( Download 1 Template)

Das sog. "Einzelne Theme" ist für alle Kunden geeignet die lediglich ein (1) Template benötigen, egal ob kommerziell oder privat genutzt. Sie dürfen das erworbene Template auf einer Joomla Installation produktiv nutzen.


Mitgliedschaft ( Download alle Templates)

Während ihrer Mitgliedschaft ist es ihnen erlaubt alle Templates herunter zu laden und unseren Bestimmungen entsprechend zu nutzen. Nach Ablauf der Mitgliedschaft dürfen sie natürlich alle bereits in Nutzung befindlichen Templates weiter einsetzen. Sie haben jedoch nach Ende ihrer Mitgliedschaft keinen Zugriff mehr auf den Download Bereich und keinen Zugriff mehr auf Updates.

Die Zahlung ist einmalig und ihr Membership läuft automatisch aus, sofern sie es nicht erneuern.

Unsere Mitgliedschaften bieten wir ausschließlich über JoomlaPlates.com an.

Jetzt kaufen