Popup/Lightbox Bild mit JCE Pro

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 Pro)

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.
Kauf/Downloads auf der Entwicklerseite. (Dort finden Sie auch die deutschen Sprachdateien für den Editor.)

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

Nach der Installation muss JCE Pro in der Joomla-Konfiguration als Standard-Editor eingestellt und die JCE Mediabox unter "Erweiterungen -> Plugins" aktiviert werden. Der Vorteil von JCE Pro ist, dass Sie unter anderem einen erweiterten Bild-Manager haben, bei dem Sie beim Hochladen verschiedene Bildgrößen erzeugen können. Vergewissern Sie sich zuerst, dass das Symbol (Icon) für den "Erweiterten Bild-Manager" JCE Icon Erweiterter Bild-Managerauch angezeigt wird. Falls Sie beim Editor nur den normalen Bild-Manager JCE Icon Bild-Manager angezeigt bekommen, dann gehen Sie auf Komponenten -> JCE Editor -> Profile -> Default -> Reiter "Funktionen" und ziehen Sie das Symbol von "Verfügbare Schaltflächen" auf "Aktuelles Editorlayout".

1. Platzieren Sie im Textbereich des Beitrages den Mauszeiger an der Stelle, wo Sie das Bild einfügen wollen.
Klicken Sie dann im Editor auf das Symbol (Icon) JCE Icon "Bild einfügen / bearbeiten" um den Erweiterten Bildmanager als Popup zu öffnen.

JCE erweiterter Bildmanager
Im Erweiterten Bildmanager wählen Sie unten links 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".

2. Im Upload-Popup: Bild über den „Durchsuchen“-Button auf der lokalen Festplatte aussuchen oder einfach in den Auswahlbereich ziehen.

JCE erweiterter Bild-Manager

Darunter finden Sie die "Bildoptionen" für das hochzuladende Bild.

  • „Größe ändern“: Generiert beim Upload ein Bild in der eingestellten Größe. Diese Größe wird für die Ansicht im Popup-Fenster verwendet.
  • „Thumbnail“: Generiert beim Upload ein kleines Bild in der eingestellten Größe. Diese Größe wird für die Anzeige im Text verwendet.

Tragen Sie die gewünschten Größen ein und aktivieren Sie die Häkchen vor den Optionen.
Klicken Sie auf den Button "Hochladen". Beim Upload werden automatisch Bilder mit den gewählten Größeneinstellungen generiert.
Das Vorschaubild (Thumbnail) wird automatisch in einem Unterordner „thumbnails“ (innerhalb des zuvor gewählten Ordners) geladen und bekommt den Präfix „thumb_“ im Dateinamen.

3. Nach dem Hochladen gehen Sie im Erweiterten Bild-Manager auf den Reiter (Tab) "Popups".

JCE erweiterter Bild-Manager

Wählen Sie zuerst beim Typ die Option "JCE MediaBox-Popups" aus (WICHTIG).
Klicken Sie anschließend auf das hochgeladene Bild (große Größe) im Anzeigebereich des Ordnerinhaltes (unten, Mitte).
JCE zeigt Ihnen nun ein Popup an: "Möchten Sie das dazugehörige Vorschaubild für den PopUp-Link verwenden?". Klicken Sie auf den "Ja"-Button. Das Popup schließt sich.
Füllen Sie, falls gewünscht, die Felder "Titel" und "Beschreibungstext" aus.
Das Feld "URL" wird automatisch mit dem Pfad zum ausgewählten großen Bild befüllt.

4. Wechseln Sie auf den Reiter "Bild".
Im Feld "URL" wurde automatisch der Pfad zur kleinen Bilddatei eingefügt. (Das haben Sie im Popup mit der Ja-Bestätigung für das dazugehörige Vorschaubild erledigt.)
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.

Speichern Sie den Beitrag.

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.