Bilder zoomen in Joomla

Joomla-Erweiterungen (Bild-Zoom)

Tools zum Vergrößern von Bildern per Klick gibt es wahrlich mehr als den berühmten "Sand am Meer".

Ich möchte mich hier auf zwei Tool für Joomla beschränken, mit denen ich eigene Erfahrungen gesammelt habe. Beide Erweiterungen stellen das zu vergrößernde Bild in einer Lightbox "vor" der eigentlichen Webseite dar. Klick neben das vergrößerte Bild oder auf einen Schalter am Rand des Bildes schließt die Lightbox.
Bei beidern Plugins müssen das kleine Bild (Thumbnail) und das große Bild nicht unbedingt identisch sein. Das ermöglicht es (z.B. bei detailreichen Bildern) als Thumbnail eine Ausschnittsvergrößerung zu wählen um die Aussage des Bildes zu erhalten. Beide Plugins versehen die Thumbnails mit den obligatorischen Lupensymbolen.  

 

Die unterschiede liegen in den Möglichkeiten, Grundeinstellungen zu ändern und damit natürlich in der Flexibilität der Anwendung. Wie üblich stehen sich möglichst einfache Anwendung ohne große Konfiguration und flexibler Einsatz durch viele änderbare Parameter gegenseitig im Weg. Mit den Plugins "Zoom Bilder Plugin für Joomla! 1.7 / 2.5" und dem "JCE MediaBox-Plugin" liegen zwei Tools vor, die die beiden verschiedenen Ansätze deutlich vertreten.

---

Zoom Bilder Plugin für Joomla! 2.5 / 3.x

• Webseite: » http://www.joomla-24.de/ (Version 2)
• Webseite: » http://www.joomla-24.de/ (Version 1.3)

"Mit diesem Plugin werden von Bildern in einem Artikel Tumbnails erstellt, in einem festgelegten Ordner gespeichert, verlinkt und per Lightbox (modales Fenster) vergrößert ausgegeben. Es ist ideal geeignet für einzelne Bilder, oder auch für kleine Bildergalerien, in den Beiträgen. Es werden die Dateiformate .jpg und .png unterstützt" schreibt das Entwicklerteam auf seiner Webseite. Damit ist das Wesentliche gesagt. Installation und Bedienung sind denkbar einfach - weitere Beschreibungen auf der Webseite der Entwickler.

Die Installation erfolgt wie üblich im Backend über "Kontrollzentrum >> Erweiterungen >> Erweiterungen: Installieren". Über "Kontrollzentrum >> Medien" (oder per FTP im Ordner images) muss ein Ordner für die großen Bilder angelegt werden. Anschließend Plugin aktivieren über "Kontrollzentrum >> Erweiterungen >> Erweiterungen: Verwalten". das Plugin heißt Content Bildzoom!
Zum Schluss über "Kontrollzentrum >> Erweiterungen >> Erweiterungen: Plugins" den Ordner für die großen Bilder eintragen.

Fertig! 

Es müssen also immer zwei Bilddateien existieren: eine für das kleine und eine für das große Bild. Das vergrößerte Bild muss mit den korrekten gewünschten Abmessung bereitgestellt werden. Besondere Aktionen sind zu der Verlinkung nicht nötig. Wenn das notwendige Großbild vorhanden ist übernimmt das Plugin alles selbst.

Da ich hier das "JCE-Mediabox-Plugin" verwende eine Demo auf einer anderen von mir betreuten Seite: » Angel-Sport-Verein Ottenhausen-Herford e.V.

---

JCE MediaBox-Plugin

• Webseite: » http://www.joomlacontenteditor.net/
• Download: » http://www.joomlacontenteditor.net/downloads/mediabox

Dieser Plugin steht dem eben genannten fast diametral gegenüber. Als Ergänzung zum Joomla-Content-Editor JCE bringt es jede Menge Einstellungsmöglichkeiten mit und ist damit flexibel einsetzbar - sollte aber eben auch sinnvoll konfiguriert sein.

Ich beschränke mich hier auf eine Beschreibung der von mir genutzten Funktionalitäten:

• komfortables Einfügen von Bildern in die Beiträge
• Bilderzoom

Weiterführende Funktionen sind an verschiedenen Stellen im Web erläutert, z.B. hier:

• » http://www.joomlacontenteditor.net/support/tutorials/jcemediabox 
• » https://www.jugfulda.de/gut-zu-wissen/132-jce-ein-cooler-editor-bilder-und-hyperlinks.html

Hier müssen nicht unbedingt zwei Bilddateien für Thumbnail und Lightbox existieren. Das Plugin kann auch die maximale Größe der Lightbox überwachen und zu große Bilder anpassen. Die Einstellungsmöglichen für die Lightbox sind vielfältig. 

Die Installation erfolgt bei vorhandenem Joomla-Content-Editor auf dem joomlatypischen Weg. Freigeben des Plugins nicht vergessen! Im JCE-Kontrollzentrum ("Komponenten >> JCE Editor") erscheint der neue Punkt "JCE MediaBox". Hier können Sie vielfältige Einstellungen vornehmen. So z. B.:

• Popup theme (Layout der Lightbox)
• ggf. feste Größe der Lightbox
• Farben, Durchsichtigkeit
• Verhalten des Popups
• ...

Das Resutat bei eingebundenen Bildern könnte so aussehen. Hier wurde einmal ein 400 x 300 Pixel großes Bild für die MediaBox und (übertriebenerweise) ein 4000 x 3000 Pixel großes Bild verwendet.

---

---

---

Die Schritte zum Einbau des kleineren Bildes werden im Folgenden dokumentiert. Die Dateien befinden sich bereits im Zielordner.

Erzeugen des Thumbnail-Bildes

Verwendet wird der JCE-Bilder-Manager (Bild einfügen/bearbeiten). Im Datei-Browser wird die entsprechende Datei ausgewählt. Die Eigenschaften werden im Reiter "Bild" angepasst. in diesem Beispiel die Bildgröße und der Abstand. Im Reiter "Erweitert" kann eine CSS-Klasse und ein Titel zugewiesen werden.

Erzeugen des MediaBox-Popups

Verwendet wird der JCE-Link-Manager (Link einfügen/bearbeiten). Im Reiter "Link" kann mit dem Icon "Durchsuchen" (neben der zeile URL) in den Datei-Browser gewechselt werden und das Bild for das Popup gewählt werden.

Im Reiter "Popups" können alle weiteren Einstellungen vorgenommen werden:

• Typ: JCE MediaBox-Popup
• Titel  (optional): erscheit in Fettdruck unter dem Popup in Zeile 1
• Bildunterschrift  (optional): erscheit in Normaldruck unter dem Popup in Zeile 2
• Gruppe (optional): zeigt mehrere Bilder in einer Lightbox nacheinander
• Popup-Icon und -Position (optional): positioniert ein Lupen-Bild auf den Thumbnails
• ...

---