(Opens in a new window - öffnet in einem neuen Fenster)

Kurz-Dokumentation Plugin "ImageChangers"

ImageChangers Version 1.0 - released 2021-02

ImageChangers ist ein Galerie-Plugin für kleine Bilderserien. Für umfangreiche Bilderserien wird das Plugin FotoPro empfohlen.

ImageChangers erzeugt keine Vorschaubilder (Thumbnails), die Bilder werden für die Vorschau nur klein skaliert.

ImageChangers arbeitet mit Bildern der Typen .jpg, .jpeg und .png, unabhängig davon ob die Dateiendungen gross, klein oder gemischt geschrieben sind. Empfohlen werden Bilder der Typen .jpg und .jpeg.

Die Bilder sollten vor dem Upload vorbereitet werden, alle Bilder einer Galerie sollten das gleiche Seitenverhältnis haben, idealer Weise die gleichen Abmessungen.

Alle Bilder sollten eine horizontale Auflösung von 600px oder höher haben.

Einsatz als "ThumbsBox"

Eine Galerie kann 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, ImageChangers 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 installiert und dessen Lightbox global aktiviert haben.

Einsatz als "ThumbsBoxJS (JavaScript)"

Bei dieser Box werden die Bilder per JavaScript gewechselt.

Vorteil: Die Seite wird nicht bei jedem Bildwechsel neu geladen, die ThumbsBox bleibt, wo sie ist und der Bildwechsel ist schneller.

Nachteil: Bei deaktiviertem JavaScript funktioniert die Box nicht, es ist nur das erste Bild zu sehen.

Einsatz als Slider (Minislider)

ImageChangers verwendet mein eigenes Slider Script "MiniSlider". Es gibt eine Version mit Navigationsbuttons und eine Automatik Version sowie 2 Übergangseffekte: fade und slide.

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 evtl. 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 Sie, wenn nötig, 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 auf älteren Servern für bestimmte Dateien und Ordner bestimmte Schreib- und Leserechte vergeben werden.

Dateien: chmod 666

./plugins/imagechangers/languages/alle Dateien
./plugins/imagechangers/config/config.php
./plugins/imagechangers/css/stylesheet.css
./userfiles/plugins/imagechangers/die_galerie/data.php

Ordner: chmod 777

./plugins/imagechangers/languages/
./userfiles/plugins/ImageChangers/
./userfiles/plugins/ImageChangers/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:icthumbsbox('Galerie_Name');}}}

Galerie_Name: Der Name des Verzeichnisses, in dem die Bilder und die data.php liegen.

4.2 ThumbsBoxJS

{{{plugin:icthumbsboxJS('Galerie_Name');}}}

Galerie_Name: Der Name des Verzeichnisses, in dem die Bilder und die data.php liegen.

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.

Im Bilderverzeichnis für einen MiniSlider sollte ein Bild mit dem Namen _minislider_bg.jpg enthalten sein. Dieses Bild sollte die gleichen Abmessungen wie die anderen Bilder haben und dient als Vorschaubild und Hintergrundbild für die Galerie.

{{{plugin:icminislider('Galerie_Name','Effekt','Bildlink');}}}

Galerie_Name: Der Name des Verzeichnisses, in dem die Bilder und die data.php liegen.
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.

Beim einfachen Pluginaufruf (nur mit 'Galerie_Name') eignet sich der MiniSlider Automatic besonders gut für bei jedem Seitenaufruf wechselnde Headerbilder im Template.

{{{plugin:icminisliderAuto('Galerie_Name','Effekt','Bildbeschreibung','Zähler');}}}

Galerie_Name: Der Name des Verzeichnisses, in dem die Bilder und die data.php liegen.
Effekt (optional): "fade" (Überblendung) oder "slide" (Einschub)
Standard: fade
Bildbeschreibung (optional): "desc" 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 Aufruf im Template

Beispiel für die Syntax für Pluginaufrufe im Template:

<?php echo icthumbsbox('Galerie_Name'); ?>

4.6 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.

Kopiervorlagen Galerien:

Im Download sind mehrere Galerien als Kopiervorlagen enthalten. Die Verzeichnisnamen dieser Kopiervorlagen beginnen mit "copytemplate_..." und sind somit leicht zu erkennen.

Verzeichnisnamen Galerien:

Die Verzeichnisnamen für die Galerien dürfen keinen Bindestrich (minus) enthalten, da sie als JavaScript-Variablen verwendet werden. In JavaScript sind Variablen mit Bindestrich nicht erlaubt.

5. Konfiguration

Die einzige globale Konfigurationsmöglichkeit von ImageChangers 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 Galerie anlegen

Wenn Sie in CMSimple eingeloggt sind, finden Sie im Admin Menü den Menüpunkt "Plugins". Wählen Sie hier "imagechangers".

Jetzt öffnet sich das Plugin-Menü, wählen Sie hier "Galerien bearbeiten".

Wählen Sie eine Galerie aus, deren Design Sie für Ihre neue Galerie verwenden möchten.

Geben Sie unter "Neue Galerie erzeugen" den gewünschten Verzeichnisnamen der neuen Galerie ein und Klicken Sie auf den Button "Galerie erzeugen". Eine neue Galerie im Design der ausgewählten Galerie wird nun automatisch erzeugt.

Gehen Sie zur neuen Galerie und bearbeiten Sie diese nach Ihren Wünschen.

MiniSlider: Im Bilderverzeichnis für einen MiniSlider sollte ein Bild mit dem Namen _minislider_bg.jpg enthalten sein. Dieses Bild sollte die gleichen Abmessungen wie die anderen Bilder haben und dient als Vorschaubild bzw.Hintergrund 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 Ihre gif Dateien prev.gif, next.gif, start.gif und stop.gif.

6.2 Galerie bearbeiten

Wenn Sie in CMSimple eingeloggt sind, finden Sie im Admin Menü den Menüpunkt "Plugins". Wählen Sie hier "imagechangers".

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. Sie können für jede einzelne Galerie individuelle Werte einstellen, so kann jeder ImageChanger anders aussehen und anders ausgerichtet sein.

Ganz unten finden Sie die Bilder, die im ausgewählten ImageChanger 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 ImageChangers 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/ImageChangers/ anlegen, dann arbeitet ImageChangers in Zweitsprachen und Subsites mit den Galerien in diesen Ordnern.

8. Verwendung in CoAuthors

ImageChangers 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: