Popup/Lightbox Bild mit JCE

Kleines Bild in Beitrag einfügen, das sich bei Klick darauf in einer größeren Ansicht (Popup/Lightbox) öffnet. (Joomla 4 und 5 mit Komponente JCE)

Das zu erreichende Ergebnis sehen Sie hier links im Beitrag. Klicken Sie auf das kleine Vorschaubild.
Wir verwenden dazu den Editor JCE, den es in einer kostenlosen und einer kostenpflichtigen Pro-Version gibt, sowie das kostenlose Plugin JCE Mediabox.
Downloads auf der Entwicklerseite. (Dort finden Sie auch die deutschen Sprachdateien für den Editor.)
Nach der Installation muss JCE in der Joomla-Konfiguration als Standard-Editor eingestellt und die JCE Mediabox unter "Erweiterungen -> Plugins" aktiviert werden.

Dies ist die Anleitung für die kostenlose Version JCE. Wenn Sie die kostenpflichtige Version verwenden, wechseln Sie bitte auf die Anleitung für JCE Pro.

Erstellen Sie zuerst ein kleines und ein großes Bild in der gewünschten Größe. Sie können diese Bilder mit dem Medienmanager in Joomla (Inhalt -> Medien) hochladen oder direkt beim Erstellen des Beitrages. Klicken Sie dazu im Beitrags-Editor (JCE) auf den Button jce icon bild "Bild einfügen / bearbeiten", um den Bilder-Manager zu öffnen.

JCE Bildmanager

1. Im Bereich unten links wählen Sie den Ordner aus, in dem die Bilder gespeichert werden sollen. (Optional können Sie auch mit dem Button "Neuer Ordner" einen eigenen Ordner erstellen.) Klicken Sie dann auf den Button "Hochladen", wählen Sie die erstellten Bilddateien aus und führen Sie den Uploadprozess durch. Die beiden Fotos werden nun im Inhaltsbereich des gewählten Ordners (unten, Mitte) aufgelistet.

2. Wählen Sie nun das kleine Bild aus, in dem Sie es anklicken. Rechts unten werden Ihnen dann die Details zur ausgewählten Datei angezeigt.
Oben, im Feld "URL" wird automatisch der Pfad zur Datei erstellt.
Darunter, im Feld "Alt. Text" sollten Sie einen Alternativtext für das Foto eingeben.
Wenn der Text das Bild umfließen soll, stellen Sie noch die Optionen "Ausrichtung" und "Abstand" (zum Text) nach Wunsch ein.
Klicken Sie anschließend unten rechts auf "Einfügen".
Der Bilder-Manager wird geschlossen und das kleine Vorschaubild im Textbereich eingefügt

3. Markieren Sie nun das kleine Bild im Textbereich, in dem Sie es anklicken.
Klicken Sie anschließend auf den Button jce icon link "Links einfügen / bearbeiten" und der Link-Manager öffnet sich.
JCE Linkmanager

Im ersten Reiter (Tab) "Link" klicken Sie neben dem Feld URL auf das Symbol (Icon) "Durchsuchen". Wählen Sie die große Bilddatei aus und anschließend rechts unten den Button "Einfügen".
Im Feld URL wird automatisch der Pfad zur ausgewählten Datei eingetragen.

Wechseln Sie dann auf den Reiter (Tab) "Popups". (Wenn Ihnen dieser Reiter nicht angezeigt wird, haben Sie das Plugin "JCE Mediabox" noch nicht aktiviert.)
JCE Linkmanager
Wählen Sie bei Typ die Option "JCE Mediabox-Popups" aus.
Tragen Sie, sofern gewünscht, Titel und Bildunterschrift ein.
Klicken Sie unten rechts auf den Button "Einfügen".

Extra-Tipp: Gruppe

Haben Sie mehrere Bilder mit Popup-Funktion auf der Seite und möchten Sie diese im Popup mit "weiter" und "zurück" direkt aufrufen können, dann richten Sie eine Gruppe ein.
Tragen Sie dazu bei jedem Bild im Link-Manager, Reiter "Popups", im Feld Gruppe den gleichen Gruppennamen ein.

 

 

Wir stehen Ihnen mit unserem professionellen Service gerne zur Verfügung:
Konzeption, Webdesign & Content, Templates, Suchmaschinenoptimierung, Support
... kontaktieren Sie uns.

Wir verwenden auschließlich systeminterne Cookies. Keine Daten werden an Externe/Dritte weiter gegeben. Bei Ablehnung sind die Funktionen der Website eingeschränkt.