"Lightbox" in J4?

  • Hi,


    ich bin auf der Suche nach einer Möglichkeit, alle Bilder die in Beiträgen vorkommen vergrößern zu lassen. Also Bild wird in klein angezeigt, User klickt drauf und das Bild wird in der Lightbox angezeigt.

    Mich wundert es, dass J4 das nicht von Hause aus kann oder habe ich eine Option übersehen?

  • Schon mal im JED nachgeschaut?
    Der JCE-Editor hat das an Bord.

    Mich wundert es, dass J4 das nicht von Hause aus kann...

    Nicht mal WP macht das "von Haus aus". Das sind halt Zusatzfunktionen die über Plugins erweitert werden oder fest in Templatframeworks eingebunden sind.

  • ich hab im JED geschaut und die Suchmaschine bemüht, da kommen immer große Galerieplugins, es soll (muss) so simpel sein wie möglich.

    Ich habe das JCE MediaBox 2 mal installiert, was das angeblich können soll auch standalone, das tut aber nichts :(


    ---

    Wordpress kann immerhin "automatisch" von Hause aus auf das Original verlinken.... was jetzt nicht heißen soll, dass WP irgendwie besser wäre.

  • von der Webseite zitiert "Our goal for this version is to create an attractive and easy to use, responsive and accessible lightbox as a companion for the JCE Editor, or for use as a standalone Joomla extension."


    Aber zurück zur Frage, es gibt keine Erweiterung die "einfach" alle Bilder ergänzt mit einer Lightbox? Da wäre dann WP wirklich im Vorteil. (Trotzdem mag ich Joomla immer noch lieber)

  • So lange her, aber nun muss ich hier doch wieder einhaken. Es hat sich ja einiges getan, aber eigentlich nichts.

    Die Lage bei mir ist folgende:

    Ich hab eine Beta-Seite installiert mit Joomla 4, alles neu eingefügt an Menüs, Texten, Bildern. Das Template ist das Standardtemplate von Joomla 4 ("Cassiopeia"). Soweit so gut.

    Nun habe ich aber verschiedene Plugins ausprobiert, die Lightboxen bieten. Unter anderem auch das von MCE. Ich habe auch eine Vorabversion vom Redim Plugin erhalten.

    Alle lassen sich installieren und im Quelltext stehen auch entsprechende Klassen drin (z.B.

    <a class="imagesizer magnificpopup".... ), das Problem ist nur, es gibt keine Lightbox. Beim Klicken geht das Fenster immer so auf.


    Nun dachte ich mir, gut, irgendwas falsch gemacht, zuviele Plugins probiert, Template blöd angepasst... und habe ein Joomla 4 neu installiert und mit dem Cassiopeia-Template out of the box getestet. Da ist es aber exakt dasselbe.


    Und nun bin ich mit dem Latein am Ende :(

  • Sorry, habe ich mich schief ausgedrückt... die Liveseite bei mir läuft noch mit Joomla 3, Betaseite war gemeint eine Testumgebung, da lief natürlich das aktuellste Joomla (hab vor Weihnachten getestet, heute dann nochmal mit 4.2.6).

    In der Browserkonsole waren keine Fehler, könnte ich sonst noch wo schauen?

  • Daher wunder ich mich ja. Ich denke ich hab alles aktiviert, ich sah halt auch die verschiedenen Auszeichnungen im Quelltext je nach Lightbox (z.B. das Redim Module hat ja verschiedene drin)

  • Moin,

    kostenlos, und mit sehr vielen Möglichkeiten bietet das UIKIT: Lightbox - UIkit (getuikit.com)

    Um das einzubinden gibts mehrere Möglichkeiten. Wenn du z.B. das Astroid Framework als Template verwendest, kannst du es dort einfach unter "Custom CSS Files" bzw "Custom JS Files" einbinden und in dem Beitrag die Bilder dann entsprechende der Syntax aufrufen:

    Code
    <div uk-lightbox>
        <a href="image.jpg"></a>
    </div>

    Kleiner Nachteil: Bei dieser Methode wird das gesamte Framework geladen, was bedeutet das zusätzlich 256KB CSS und und 132KB JS geladen werden müssen. Das lohnt sich aber, wenn man vom UIKIT mehrere Effekte nutzt (und da gibt es wirklich sehr viele tolle Sachen).

    Protipp: In Astroid kannst du auch externe Quellen Menüpunkt genau laden lassen, also wenn du den Lightboxeffekt nicht auf der Startseite brauchst, sondern in einer anderen Unterseite, lädst du es nur da:



    Viel Erfolg, ansonsten nutze ich auch den JCE mit dem Media Plugin, allerdings auch in der ProVersion.

    WBR from DE-de

    "Hier könnte Ihre Werbung stehen"

  • Da auch ich gerade ein Lightbox-Problem lösen möchte und ich hier noch keine Rückmeldung zu einer Lösung gelesen habe, möchte ich meinen Senf beitragen:

    Die über das UI-Kit angebotene Lightbox lädt Videos, ohne dass die mit angegebenen Dimensionen berücksichtigt werden. Ein Video wird also immer auf 100% der eingestellten maximalen Seitenbreite gedehnt. Was bei Mobilgeräten wenig auffällt, führt auf dem Desktop zu eklig verwaschener Videodarbietung, wenn man z.B. nur 720p-Material hat.


    Als Alternative biete sich die Modalbox aus dem UI-Kit an. Bei der werden die Dimensionsangaben berücksichtigt. Und wenn der Screen kleiner ist, skaliert es automatisch auf die maximal mögliche Breite. Allerdings hat es den Fehler, nicht auch die verfügbare Höhe bei der Anpassung zu berücksichtigen, sodass z.B. ein 720p-Video auf dem Smartphone im Portrait-Modus korrekt wieder gegeben wird, aber im Landscape-Modus so hoch ist, dass es nicht mehr fest stehenden gezeigt wird, sondern sich scrollend auf und ab bewegen lässt und zudem immer ein Teil des Videos von oben oder unten her abgeschnitten wird.


    Das sind meiner bisherigen Erfahrung nach die üblichen Tücken bei Lightboxen!


    Falls trunky noch keine Lösung gefunden hat:

    Aktuell probiere ich, mit dem Tobii-Script weiter zu kommen. Es ist schön schlank, die CSS ist übersichtlich und mir wird kein neuer, heutzutage unnötiger Mediaplayer verkauft. Die Demoseite von Tobii https://www.cssscript.com/content-lightbox-tobii/ läuft auch auf Mobilgeräten so, wie ich das gerne hätte. An der Gestaltung der Lightbox selbst möchte ich aber noch Hand anlegen.

  • Die JCE-Mediabox kenne ich seit Langem und hatte sie auf all meinen Joomla-3 Sites verwendet. Im Laufe der Zeit hatte ich immer wieder Probleme damit – aber auch mit dem JCE-Editor. Beides verwende ich nun nicht mehr.


    Im Januar gab es ein Update von YooTheme, nachdem jetzt die Probleme teilweise behoben sind. Ich nutze jetzt dort nur noch die LIghtbox für meine Zwecke und verzichte auf die von mir genannte Extension Mediabox-CK.


    Wie verhält sich die Uikit-Lightbox jetzt?

    Nach wie vor ignoriert sie die im Link mit gegebenen Parameter wie die dimensions oder den caption-text. Aber die Lightbox stellt nun Videos nie größer dar, als ihr Originalformat. Und wenn Screenwidth oder Screenheight kleiner als das Videoformat ist, wird unter Beibehaltung des aspect-ratio das Vido verkleinert bis es passt. Das führt automatisch z.B. auf TouchDevices dazu, dass das Video größtmöglich dargestellt wird. Prima so!


    Benutzt man Iframes, um z.B. Joomla-Websites darzustellen, so wir automatisch die Iframe-Größe so gewählt, dass allseitig ein auch bei Touch-Geräten genügend großer Abstand zum Rand des Screens bleibt, um die Lightbox durch einen Touch in diese Region schließen zu können. Bei großen Screens wird das Iframe dann aber zu groß. Leider reagiert die Lightbox auch bei der Anzeige von Iframes nicht auf dimension-Angaben im Link. Man kann aber in der User.css einfügen:

    Code
    .uk-lightbox iframe {max-width: 300px;}

    und dann wird die Dimension (für alle Iframes) übernommen! Ist Screenwidth kleiner, greift wieder das beschriebene Auto-Margin.


    Und für die von mir gewünschte Audio-Wiedergabe in einer Lightbox habe ich auch eine Lösung: In einem Video-Editor füge ich zur Mp3-Datei einfach ein Standbild hinzu und lasse das Ganze als Video rendern. Dann kann die Lightbox es laden, wohingegen ein Audio nicht geladen werden kann.


    Mit der Uikit Modalbox kann ein Audio geladen werden. Startet es der Benutzer in der Modalbox und schließt die Box während des Abspielens, fehlt der Event-Handler, der das Audio stoppt, sodass der Benutzer mit Sicherheit verärgert wird!


    Dass im Ui-Kit solche Fehler enthalten sind und zugleich die Dokumentation etwas anderes beschreibt, finde ich schon fatal! – Trotz allem komme ich nun aber mit dem Aufbau meiner Websites deutlich besser zu Recht, als ohne YooTheme. Und der entstehende Code ist sehr schlank und die Seiten laden sehr schnell, da automatisch alles komprimiert wird, auch Bilder incl. LazyLoading. Extensions wie JCH-Optimizer sollten nicht eingesetzt werden! Es wird sonst langsamer und evtl. auch instabil.


    Trotz der hier beschriebenen Fehler kann ich YooTheme und das UiKit empfehlen!