Entwicklerversion (testing) verfügbar !

Hier wird die Typo3 Extension cfa_mooflow demonstriert. Das Frontend Plugin integriert das MooFlow Projekt von Tobias Wetzel in Typo3.

Das Plugin wird über FlexForm im Backend konfiguriert, wobei sowohl Bildattribute als auch MooFlow Script Parameter gesetzt werden können.

Unterstützt wird ab Version 0.2 sowohl Dam als auch Dam Kategorieren für die Auswahl der Bildquelle.
Ebenfalls in dieser Version wurde die Konfiguration für die manuelle Auswahl der Bildquelle vereinfacht.

Ab Version 0.3.0 können Bildersets dynamisch nachgeladen werden (Ajax request).

Es stehen zwei Methoden für das Klickverhalten zur Verfügung.
Eine Methode (link) öffnet einen externen oder internen Link.
Die andere Methode ist die ReMooz-Bridge und öffnet das Bild mit zoom Effekt (inline pop up), welche für diese Demo gewählt wurde.
ReMooz ist ein Projekt von Harald Kirschner.

Die hier gezeigte Demo verwendet ReMooz zur Anzeige vergrößerte Bilder und dynamisches Laden von Bildersets (Ajax) aus Dam Kategorien.
Der Einsatz als Linkliste ist hier zu sehen.

Download Extension

Eine Kurzanleitung folgt nach der Demo.

Kurzanleitung

Ab Version 0.2 stehen vier Möglichkeiten zur Auswahl der Bildquelle bereit.

• Manuelle Auwahl ( Wie bisher, aber mit verbesserter Konfiguration )
• Verzeichnis Auswahl ( Eingeschränkte Konfiguration, nur globale Parameter für title und alt möglich )
• Dam Auwahl ( Bildparameter kommen direkt vom Bild sofern gesetzt und indexiert )
• Dam Kategorie Auswahl ( Bildparameter kommen direkt vom Bild sofern gesetzt und indexiert )

Die Auswahl Dam und Dam Kategorie stehen nur zur Verfügung wenn diese Extensions installiert sind.
Der Umgang mit Dam wird vorausgesetzt.

Bei der manuellen Auswahl können individuelle Bildparameter gesetzt werden, welche in der nachfolgend erklärten Syntax im Parameter Feld eingetragen werden.

[Num]=[Key]:[Value];[Key]:[Value]...

[Num] repräsentiert das Bild in der angezeigten Reihenfolge der Liste.
Das erste Bild z.B. wird über 1= angesprochen.

Als [Key] können folgende Einträge gesetzt werden.

• title = Bildtitel ( Wird in der normalen und vergößerten Ansicht angezeigt )
• alt = Bildbeschreibung ( Wird bei Klick Verhalten "ReMooz" in der vergrößerten Ansicht zusätzlich zum Titel angezeigt )
• href = Bildverweis ( Wird nur bei Klick Verhalten "Link" verwendet )
• target = Standard _blank, kann z.B. für interne Verlinkung auf _self gesetzt werden. Ab Version 0.3.2

Das Klick Verhalten wird über den Reiter Konfigurations eingestellt. Dort befinden sich auch weitere Script relevante Einträge, welche im Manual genauer beschrieben sind.
Wie in dieser Demo zu sehen werden "title" und "alt" in der vergrößerten Ansicht (Doppelklick / Klick) mit einem Bindestrich kombiniert.
Soll für alle Bilder "title" und "alt" gleich gelten, ist dies durch den [Num] Eintrag 0= zu erreichen. Alle nachfolgenden Einträge, sofern vorhanden, werden dann ignoriert.

Soll die Extension als Linkliste dienen ist der "href" Parameter zu setzen. Die Link Beschreibung kann dann in den "title" Parameter eingetragen werden. Der "alt" Parameter kann in diesem Fall ignoriert werden. Das Doppelklick Verhalten ist im Reiter Konfiguration auf "Link" einzustellen. Der "href" Parameter darf nicht mit "http://" gesetzt werden !

Interne Links müssen mit einem "/" beginen !
Bei internen Links ist der target Parameter auf _self einzustellen.

Die Verzeichnis Auswahl bietet die Möglichkeit als Bildquelle ein Verzeichnis anzugeben. Bildparameter können dabei aber nur global gesetzt werden.

Bei den Auswahlen Dam und Dam Kategorie müssen als Bildparamter in Dam folgende Felder gefüllt werden.

• Bezeichnung = title (Bildtitel)
• Beschreibung = alt (Bildbeschreibung)
• Anweisung/Verwendung = href (Ziel URL bei Link Verwendung)

Bei Verwendung von Dam Kategorieren ist es möglich mit der zusätzlichen Option "Dynamisch laden" mehrere Kategorien anzugeben.
Im Frontend wird dann zu jeder Kategorie ein Link mit dem Namen der Kategorie erstellt (Siehe Screenshot im Manual). Über diese Links werden die Kategorien dynamisch in das Album geladen ohne die Seite neu aufzubauen. Die erste Kategorie wird beim Seitenaufruf automatisch geladen. Die Linkliste kann per CSS beeinflusst werden. Die Klasse der DIV Container um den Link nennt sich "tx_cfamooflow_pi1_loadjson". Beim Aufruf der Seite hat die aktive Kategorie eine zusätzliche Klasse um den Startlink per css zu beeinflussen. Diese Klasse nennt sich "isInitLoadCat".

Auto Setup

Die Option "Auto Setup" steht seit der Version 0.3.4 zur Verfügung und ermöglicht es das cfa_mooflow Plugin mehrfach in eine Seite einzubinden. 

Vorgehensweise : Das Plugin so oft wie benötigt in die Seite einbinden. Alle eingebundenen Plugins, außer das erste auf der Seite, auf "Auto Setup" einstellen.
Das erste eingebundenen Plugin kann nun dazu verwendet werden die Konfiguration, welche dann für alle eingebundenen Plugins gültig ist, vorzunehmen.
Nach Abschluss der Konfiguration dieses ebenfalls auf "Auto Setup" einstellen.

Die Liste der gültigen Konfigurationsparameter im "Auto Setup" Modus kann dem Handbuch entnommen werden.

Hinweise

Bei falscher Kombination von Einstellungen die in Abhängigkeit miteinander stehen kommt es zwangsläufig zu Fehlern.

Beispiel:
Wird als Doppelklick Verhalten "Link" im Reiter Konfiguration eingestellt ohne den Bildparameter "href" zu setzen.

Bei Einsatz dieser Extension zusammen mit andern JavaScript basierenden Extensions kann es zu Konflikten kommen.

Besonderer Hinweis

Probleme bitte nur mit detaillierter Beschreibung der Vorgehensweise, der Umgebung, der Fehlerberichterstattung und einem Link zur betroffenen Seite einreichen. Anfragen wie "Bei mir funktioniert die Extension nicht, was mache ich falsch" werden unbeantwortet bleiben.
Eine ausführliche Beschreibung findet sich im original Manual.