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

  • 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.