(Opens in a new window - öffnet in einem neuen Fenster)
Kurz-Dokumentation Plugin "FotoBoxes"
Version FotoBoxes 2.8 - released 2021-02
Einsatz als "ThumbsBox"
Eine Galerie kann auch als sogenannte "ThumbsBox" dargestellt werden. Die Navigation erfolgt dann über kleine Vorschaubilder (Thumbnails) unter dem Hauptbild. Die Anzahl der Vorschaubilder in einer Reihe können Sie im Backend festlegen, FotoBoxes passt die Grösse der Vorschaubilder automatisch an.
Das grosse Bild kann in einer Lightbox geöffnet werden. Dazu muss eine Lightbox installiert sein, das ist z. B. der Fall, wenn Sie das Plugin FotoGalerie istalliert und dessen Lightbox global aktiviert haben.
Die Bilder sollten Sie vor dem Upload vorbereiten, alle Bilder einer Galerie sollten das gleiche Seitenverhältnis haben.
Einsatz als "ThumbsBoxJS (JavaScript)"
Seit Version 1.2 gibt es auch eine "ThumbsBoxJS". Bei dieser Box werden die Bilder per JavaScript gewechselt.
Vorteil: Die Seite wird nicht neu geladen, die ThumbsBox bleibt, wo sie ist und der Bildwechsel ist schneller.
Nachteile: Die Funktion "Lightbox" ist nicht verfügbar und die Bildbeschreibungen der einzelnen Bilder werden nicht angezeigt. Es wird immer der Galeriename angezeigt.
Für alles andere nimmt die ThumbsBoxJS die Einstellungen der normalen ThumbsBox.
Einsatz als Slider (Minislider)
Seit Anfang 2014 steht mein eigenes Slider Script "MiniSlider" zur Verfügung. Der "MiniSlider" ist responsiv, d. h. die Slider passen sich dem zur Verfügung stehenden Platz an.
1. Systemvoraussetzungen
Voraussetzung ist eine funktionierende Installation von CMSimple 4.0 oder höher.
Empfohlen wird CMSimple 4.4 oder höher bzw. die aktuelle Version von CMSimple.
2. Installation
- zip-Datei herunterladen und mit einem geeigneten Programm entpacken
-
- Laden Sie die komplette Ordner-Struktur des Verzeichnisses "CMSimpleRoot" (die Verzeichnisse "plugins" und "userfiles") in das Installationsverzeichnis von CMSimple hoch.
- Ihr ftp Programm wird merken, dass es diese Verzeichnisse bereits gibt, und Sie fragen, ob Sie das wirklich tun wollen. Beantworten Sie diese Frage einfach mit "ja", "ok" oder was immer Ihr ftp Programm anbietet.
- Bei einem Update laden Sie einfach das Verzeichnis "userfiles" nicht mit hoch.
- Vergeben mit Ihrem ftp-Programm die erforderlichen Lese- und Schreibrechte für Ordner und Dateien.
3. Datei- und Ordnerrechte
Damit das Programm funktioniert und arbeiten kann (bzw. administrierbar ist), müssen für bestimmte Dateien und Ordner bestimmte Schreib- und Leserechte vergeben werden.
Dateien: chmod 666
- ./plugins/fotoboxes/languages/alle Dateien
- ./plugins/fotoboxes/config/config.php
- ./plugins/fotoboxes/css/stylesheet.css
- ./userfiles/plugins/fotoboxes/die_galerie/data.php
Ordner: chmod 777
- ./plugins/fotoboxes/languages/
- ./userfiles/plugins/fotoboxes/
- ./userfiles/plugins/fotoboxes/Alle Ordner
4. Plugin-Aufrufe
Fügen Sie einen der folgenden Plugin-Aufrufe in Ihre CMSimple Seite ein, an der Stelle, an der die Galerie zu sehen sein soll:
4.1 ThumbsBox
{{{PLUGIN:FotoBoxThumbs('Galerie_Name','width');}}}
- Galerie_Name: Der Name des Verzeichnisses, in dem die Bilder und die data.php liegen.
- width: Die Breite der Bilder in px (ohne "px") - sollte der Breite der Bilder entsprechen
4.2 ThumbsBoxJS
{{{PLUGIN:FotoBoxThumbsJS('Galerie_Name','width');}}}
- Galerie_Name: Der Name des Verzeichnisses, in dem die Bilder und die data.php liegen.
- width: Die Breite der Bilder in px (ohne "px") - sollte der Breite der Bilder entsprechen
4.3 MiniSlider
Der MiniSlider ist eine Slideshow mit einer Toolbar.
Beim Aufruf der Seite ist der MiniSlider inaktiv und kann mittels der Toolbar aktiviert und bedient werden.
Der MiniSlider arbeitet ausschliesslich mit Dateien des Typs ".jpg"!
Im Bilderverzeichnis für einen MiniSlider sollte ein Bild mit dem Namen aaa_bg.jpg enthalten sein. Dieses Bild sollte die gleichen Abmessungen wie die anderen Bilder haben und dient als Vorschaubild für die Galerie.
{{{PLUGIN:FotoBoxMS('Galerie_Name','max_width','Effekt','Bildlink');}}}
- Galerie_Name: Der Name des Verzeichnisses, in dem die Bilder und die data.php liegen.
- max_width (optional): Die maximale Breite der Box in px (z. B. "360px") - sollte der Breite der Bilder entsprechen (optional)
Standard: 640px - Effekt (optional): "fade" (Überblendung) oder "slide" (Einschub)
Standard: fade - Bildlink (optional): "imagelink": Klick auf das aktuelle Bild öffnet das Bild in Originalgrösse. Wenn Shutter Mobile aktiv ist, öffnet eine Slideshow in einer Lightbox.
Standard: leer
4.4 MiniSlider Automatic
Der MiniSlider Automatic hat keine Toolbar und startet automatisch. Bei "mouseover" wird die Slideshow unterbrochen (angehalten), ein Klick ruft das nächste Bild auf und "mouseout" startet die Slideshow wieder.
Der MiniSlider arbeitet ausschliesslich mit Dateien des Typs ".jpg"!
Im Bilderverzeichnis für einen MiniSlider sollte ein Bild mit dem Namen aaa_bg.jpg enthalten sein. Dieses Bild sollte die gleichen Abmessungen wie die anderen Bilder haben und dient als Hintergrund für die Galerie.
{{{PLUGIN:FotoBoxMSA('Galerie_Name','max_width','Effekt','Bildtitel','Zähler');}}}
- Galerie_Name: Der Name des Verzeichnisses, in dem die Bilder und die data.php liegen.
- max_width (optional): Die maximale Breite der Box in px (z. B. "360px") - sollte der Breite der Bilder entsprechen (optional)
Standard: 640px - Effekt (optional): "fade" (Überblendung) oder "slide" (Einschub)
Standard: fade - Bildtitel (optional): "title" zeigt den Bildtitel / die Bildbeschreibung an. Ist keine Bildbeschreibung vorhanden, wird der Dateiname angezeigt.
Standard: leer - Zähler (optional): "count" zeigt die aktuelle Bildnummer und die Gesamtzahl der Bilder an (z. B. Bild 1 / 5).
Standard: leer
4.5 Hinweise:
Die Pluginaufrufe sollten entweder nur mit dem Galerienamen oder mit ALLEN optionalen Parametern erfolgen. Die optionalen Parameter können leer gelassen werden, in diesem Fall greift die Standard Einstellung.
Die optionalen Parameter können aber auch "von hinten" weggelassen werden.
Da die Editoren gerne automatisch ein <p> ... </p> um den Plugin Aufruf setzen, empfiehlt es sich, den Plugin Aufruf in ein <div> ... </div> zu packen, damit die Seite validiert.
Hinweis: Bitte fügen Sie den Plugin Aufruf immer in der Quelltext Ansicht ein.
Demo Galerien:
Im Download sind mehrere Demo Galerien enthalten. Die können Sie wie folgt aufrufen:
ThumbsBox:
{{{PLUGIN:FotoBoxThumbs('example_light','360');}}}
ThumbsBoxJS:
{{{PLUGIN:FotoBoxThumbsJS('example_dark','360');}}}
MiniSlider:
{{{PLUGIN:FotoBoxMS('example_minislider');}}}
MiniSlider Automatic:
{{{PLUGIN:FotoBoxMSA('example_minislider','360px','slide','title','count');}}}
5. Konfiguration
Die einzige globale Konfigurationsmöglichkeit von FotoBoxes ist der Pfad zu den Galerie Daten. Der sollte nicht geändert werden (nur für Experten).
Alle anderen Konfigurationsmöglichkeiten finden Sie im Plugin Backend unter "Galerien bearbeiten".
6. Galerien anlegen und bearbeiten
6.1 Standard FotoBox anlegen
- Legen Sie ein Verzeichnis mit dem gewünschten Galerie Namen im Verzeichnis ./userfiles/plugins/fotoboxes/ an (keine Umlaute, Leerstellen oder Sonderzeichen).
- Erteilen Sie dem Verzeichnis ./userfiles/plugins/fotoboxes/Die_Galerie Schreibrechte (chmod 777).
- Laden Sie die vorbereiteten Bilder in das Verzeichnis hoch.
- MiniSlider: Im Bilderverzeichnis für einen MiniSlider sollte ein Bild mit dem Namen aaa_bg.jpg enthalten sein. Dieses Bild sollte die gleichen Abmessungen wie die anderen Bilder haben und dient als Vorschaubild für die Galerie.
- MiniSlider: Wenn ein MiniSlider eigene Navigationsbuttons verwenden soll, legen Sie einfach im Datenverzeichnis einen Ordner "buttons" an und hinterlegen Sie da die gif Dateien prev.gif, next.gif, start.gif und stop.gif.
- Laden Sie aus einer der Beispiel Galerien die Datei "data.php" in das Verzeichnis ./userfiles/plugins/fotoboxes/Die_Galerie/ hoch.
- Erteilen Sie für die Datei "data.php" Schreibrechte (chmod 666).
- Gehen Sie zu "Galerien bearbeiten", wählen Sie die neue Galerie, führen Sie Ihre Modifikationen durch und speichern Sie die Galerie ab, die data.php wird nun neu geschrieben.
6.2 FotoBox konfigurieren
Wenn Sie in CMSimple eingeloggt sind, finden Sie im Admin Menü den Menüpunkt "Plugins". Wählen Sie hier "fotoboxes".
Jetzt öffnet sich das Plugin-Menü, wählen Sie hier "Galerien bearbeiten".
Mittels der Selectbox oben links können Sie die Galerie auswählen, die bearbeitet werden soll.
Unter "Galerie bearbeiten" können Sie für jede einzelne Galerie individuelle (von der Standard Konfiguration abweichende) Werte einstellen, so kann jede FotoBox anders aussehen und anders ausgerichtet sein.
Ganz unten finden Sie die Bilder, die in der ausgewählten FotoBox angezeigt werden. Hier können Sie für jedes Bild einen kurzen Beschreibungstext eingeben.
7. Der Datenpfad in Zweitsprachen und Subsites
In den Kopiervorlagen von CMSimple (2lang, 2site und 2site2lang) ist kein Ordner userfiles enthalten.
In diesem Fall arbeitet FotoBoxes auch in Zweitsprachen und Subsites mit dem userfiles Ordner des Installationsverzeichnisses von CMSimple.
Wenn Sie im Verzeichnis der Zweitsprache oder der Subsite einen Unterordner userfiles mit den Unterordnern plugins/fotoboxes/ anlegen, dann arbeitet FotoBoxes in Zweitsprachen und Subsites mit den Galerien in diesen Ordnern.
8. Verwendung in CoAuthors
FotoBoxes funktioniert auch unter CoAuthors, das heisst, das Plugin kann in Installationen von CMSimpleCoAuthors oder in CoAuthors-Subsites (Verwendung der Kopiervorlage 2author) verwendet und in die Hauptseite eingebunden werden.
Einschränkungen und Hinweise
Es ist nicht möglich, ein und die selbe Galerie auf einer Seite mehrmals als MiniSlider oder mehrmals als ThumbsBox anzuzeigen, auch nicht im Template oder in einer Newsbox. Eine Galerie kann aber auf einer Seite einmal als ThumbsBox und einmal als MiniSlider angezeigt werden.
Alle Bilder sollten die gleichen Abmessungen oder zumindest das gleiche Seitenverhältnis haben. Wenn Sie in einer Querformat Galerie ein Bild im Hochformat anzeigen wollen, bereiten Sie das Bild entsprechend vor, indem Sie ein Bild in den normalen Abmessungen erzeugen und das gewünschte Bild hineinkopieren: