Lightbox.JS in Joomla integrieren (oder eine andere Lightbox)

    Lange hab ich mit RokBox als Alternative zur JCE-Mediabox experimentiert. Eigentlich läuft die Rokbox ja auch prima, benötigt aber für die Darstellung von Videos auf Mobilgeräten noch ziemlich Anpassungen. Jedenfalls sind die bisherigen Ergebnisse – besonders auf Mobilgeräten – erheblich besser, als mit JCE-Mediabox.


    Die nötigen Optimierungsarbeiten an der RokBox beziehen sich aber auf die Verwendung von Mootool-JS und die sind ja für Joomla ziemlich out, wenn ich das recht verstanden habe.


    Deshalb habe ich durch Recherchen eine neue Lightbox / Modalbox gefunden, die gemäß deren Demo-Website und gemäß deren Dokumentation für mich brauchbar wäre und moderne Scripte verwendet. Es nennt sich Lightbox.js und findet sich hier.

    Ich habe genau nach Anleitung die Scripte mittels Ergänzung der index.php des Template eingebunden und ebenso die CSS per @import in die template.css (Ich verwende aktuell Protostar). Auch an den lightcase-Font habe ich gedacht.


    Leider ist das Ergebnis nun gar nicht so, wie es so hübsch auf der Demo-Seite gezeigt wird. Vor allem lässt sich die einmal geöffnete Lightbox nur noch über den Zurück-Button des Browsers schließen. Weiteres habe ich auf meiner Test-Website beschrieben, die sich hier befindet:

    Ich wünsche mir, dass jemand sich auf meine Testseite traut und mir evtl. die rettenden Ideen bringt. fie

    Im aktuellen Firefox wird das Video auf deiner Seite so geöffnet wie auf der Demo-Seite. Ich kann auch den Hintergrund anklicken, um es zu schließen. Ist halt auf 400x225 eingestellt.

    Lediglich das Kreuz wird nicht dargestellt. Da fehlt womöglich irgendwo die Angabe der Icomoon-Family.


    Na das ist ja mal wieder echt krass! Ich hab im Firefox das Addon ClearCache, damit mir der Browser nicht längst geänderten Code interpretiert. Und trotzdem geschieht genau dies! – Tja mein Anfängerfehler... immer wieder neu!


    Ich danke dir für deinen Hinweis. Ich hab mir die Lightbox jetzt mal in Midori angeschaut und sie funktioniert auf Anhieb... — aber leider zeigt sie das Video nicht mit voller Viewportbreite (max-width: 100%) Aber bei mir wird der Schließen-Button oben rechts korrekt angezeigt! Der HTML-5-Audioplayer wird vor einer viel zu großen schwarzen Fläche gezeigt. Text von Joomla-Beiträgen werden korrekt angezeigt.


    Auf den von mir unter Android getesteten Mobil-Browsern fehlt dieser Button. Aber auf allen Browsern spielt das Video endlich ohne Fehlermeldungen oder sonstigen Ärger einwandfrei ab! Das Video wird mit voller Viewportbreite dargestellt. Im Querformat des Video bleibt aber dann kein Platz mehr für den Schließen-Button, sodass der Betrachter leider ratlos sein wird, wie er das Dingens wieder schließen kann.

    Und Text wird auf dunklem Hintergrund kaum lesbar gezeigt, während dies beim Desktop-Browser so funzt wie gewünscht.


    Wenn es mir gelingt, diese Darstellungsfehler zu korrigieren, habe ich hier endlich eine zuverlässige Lightbox für jeden medialen Inhalt gefunden, die auch auf Mobilgeräten einwandfrei funktioniert. – OK auf Apfelgeräten kann ich nicht testen.


    Noch während ich dies schreibe, erhalte ich die Mitteilung, dass eine weitere Antwort hier eingegangen ist. Mal schauen...

    JoomlaWunder

    Leider kann ich das, was du hinter dem Spoiler verborgen hast, nicht sehen. Evtl. ein falscher Link?


    Der Font hatte tatsächlich einen falschen Pfad in der lightcase.css und der überschrieb mir den von mir korrekt angelegten Pfad in einer anderen css-Datei. Das X kommt jetzt sicher.


    Mit der Anpassung gemäß meiner oben genannten Wünsche habe ich für mich unlösbare Probleme, da z.B. die Größe der Content-Box, ähnlich wie in RokBox, per JS dynamisch berechnet wird.

    Und weil ich mich mit JS zu wenig auskenne (praktisch gar nicht), kann ich da nicht sinnvoll daran herum ändern.

    Es sieht danach aus, dass ich hierfür doch noch einen Dienstleister beauftragen muss.

    Einmal editiert, zuletzt von Indigo66 () aus folgendem Grund: Ein Beitrag von Clemens-XS mit diesem Beitrag zusammengefügt.

    Die Aufgabe ist nicht einfach.


    Eine anpassbare Größe der Content-Box lässt sich mit einem passendem DIV-Wrapper setzen, der das Bildverhältnis steuert.


    Dazu muss height entfernt werden, die Höhe ergibt sich. Die Breite des video wird mit width wird auf einen hohen Wert (den gewünschten Maximalwert) gesetzt, z.B. 1000px, die Maximal-Breite max-width auf z.B. 90%. Ob das jetzt in für Lightbox ausreicht, glaube ich aber nicht.

    Vielen Dank addi !

    Die Schwierigkeit betr. dieser Lightbox sehe ich, genau wie bei der von RokBox / Rocket Theme darin, dass die Definition einiger Klassen, die die Größe der content-box bestimmen, dynamisch durch Berechnungen des Script bestimmt werden.

    Das Script erkennt die Screen-dimensions sowie die Geräteklasse und errechnet individuelle Klassendefinitionen und dies auch abhängig davon, welche Art von Mediadata in die Content-Box geladen werden soll. Das sieht man auch daran, dass ein Joomla-Beitrag, den ich auf dem Desktop öffne, seinen Hintergrund behält, während bei Darstellung auf dem Smartphone plötzlich der Hintergrund fast schwarz ist.


    Ich habe sogar versucht, im Script an den bei Videowiedergabe benutzten Dimensions der Content-Box etwas zu verändern. (Zeilen 60 und 61 sowie 108 und 109) bzw. in meiner geänderten JS Zeilen 66 + 67 plus 114 + 115)

    Zwar habe ich jetzt ein schönes großes Video, aber mit dem Start des Containers auch ein Mis-Placement des Container nach rechts unten. Dieses korrigiert sich von selbst, wenn bei geöffneter Lightbox die Breite des Browserfenster verändert wird. Klar, denn dann erfolgt eine Neuberechnung.


    Ich glaube, das ist was für JS Spezialisten. :)

    Liebe Astrid! Herzlichen Dank für deinen wertvollen Hinweis. Der kommt gerade rechtzeitig, weil ich jetzt den Auftrag für die Lightbox vergeben habe. So konnte ich deine Links an ihn weiter geben.

    Ich überlasse ihm die Entscheidung, welches der Scripte aktueller und qualitativ besser oder auch leichter anpassbar ist.


    Jedenfalls finde ich die von dir empfohlene glightbox als sehr elegant. Macht einen positiven Eindruck. Leider hab ich keine Zeit mehr, mich darum zu kümmern.

    Gibt es irgendwo eine "Schritt-für Schritt-Anleitung", wie die Glightbox in Joomla4 aktiviert werden kann? Ich plage mich gerade mit etlichen (Lightbox)Plugins herum, die unter der Version 4 nicht richtig funktionieren. Verstanden habe ich, dass glightbox.min.js im Cassiopeia-Template ins js-Verzeichnis kommt und glightbox.min.css ins css-Verzeichnis. Wir rufe ich die Glightbox aber korrekt auf? Bin nur gelegentlich mit Joomla zu Werke, vor allem, wenn ein größerer Versionssprung stattfindet, und nun nutze ich die Gelegenheit, alles noch einmal neu zu machen. Danke für jeden Hinweis!

    So sorry, aus der Doku für https://biati-digital.github.io/glightbox/ geht nicht hervor, dass das Plugin auf V4 läuft (läuft also offenbar nicht). Sorry auch fürs Thread-Kapern, das war nicht so gemeint, jedenfalls nicht bös. ochGlightbox hatte ich mir schon angesehen, die kostet aber jedes Jahr 10 Euro, das wärs mir nicht wert, vor allem wenn es eine kleine Lösung für umsonst gegeben hätte. Die Sache mit dem neuen Thread hat sich dann aber auch erledigt. Ich suche mal weiter nach anderen kostenlosen Lösungen für J4. Danke!

    Glightbox ist nur eine Javascript Library, die musst du in Joomla selber integrieren. Wie es benutzt wird, steht in der Dokumentation: https://github.com/biati-digit…box/blob/master/README.md

    ochGlightbox ist ein fertiges Plugin für Joomla, und weil der Entwickler schon die Lösung für die Einbindung in Joomla programmiert hat, verlangt er 10€ im Jahr.. das sind weniger als 1€ / Monat...

    Wie Viviana schon schrieb, kann man die Javascript Library von Glightbox in Joomla integrieren. Das genannte Liesmich habe ich mehrfach studiert und schrieb deshalb gestern "Gibt es irgendwo eine "Schritt-für Schritt-Anleitung", wie die Glightbox in Joomla4 aktiviert werden kann?" Die knapp gefasste Doku gebraucht Begriffe und Abkürzungen, die ich versuche, nachzuschlagen aber als "einfacher Benutzer" von Joomla am Verständnis scheitere und sowieso am Transfer der genannten Beispiele in meine Situation. Deshalb meine Nachfrage, ob es Liesmichs gibt, die zB erläutern, wie eine Javascript Library fachlich richtig integriert in Joomla wird. Dass der Entwickler von ochGlightbox 10 Euro pro jahr für seine Erweiterung verlangt, ist angesichts der Programmierarbeit, di er gemacht hat, einzusehen. Ich hätte aber auch gerne selbst verstanden, wie es geht. Ein Link zu passender Literatur würde mir helfen, so etwas wie selfhtml vor vielen Jahren für diejenigen war, die sich stückweise in html einarbeiten mussten und wollten.

    Ist nicht ganz was du suchst, aber hier erklärt Lukas wie man eine Slider Library in Joomla einbaut:

    Externer Inhalt www.youtube.com
    Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.
    Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.

    https://github.com/svom/jddach-2021-slider