Extension: Vertikaler Bild-Scroller mit Klick-Vergrößerung ( kj_imagelightbox2 )

Anleitung zum Einbau eines vertikalen Bild-Scrollers
mit Klick-Vergrößerung in Typo3 wie im Beispiel
www.schlottag.com

Für einen Kunden, der Lichtwerbung und Schilder als Arbeitsproben zeigen will, suchten wir eine Typo3-Extension, die Bilder scrollen kann und gleichzeitig mit einem Klick auf das Bild möglichst
effektvoll präsentiert.

Nach einigen Suchen und Versuchen installierten wir eine Lösung aus 2 Extensions, die sich ergänzen und die geforderte Leistung bringen.

Hier die Anleitung zum Nachbauen.

Installieren der Extensions im Backend von Typo3 über den Menupunkt Tools/Ext Manager.

Wir benötigen 2 Extensions:
KJ: Image Lightbox v2 (kj_imagelightbox2) in der Version 1.4.2 (Stable)
und
Content Element From TypoScript (tscobj) in der Version 0.1.1 (Stable)

Im Extension Manager das dropDown "Menü" runterklappen und "Import Extensions" wählen.
Dadurch werden aus dem Typo3 Online-Repository Erweiterungen installiert.
Bitte darauf achten, dass ein Häkchen bei "Show obsolete" gesetzt ist und ein rotes "all" bei "List or look up all extensions" steht. Sonst bekommt man nur einen Bruchteil der Extensions angezeigt. Das "all" kann eingeschaltet werden im Dropdown "Settings" - Dort das Häkchen in den "Security Setting" setzen: "Enable extensions without review" Dann sieht man auch unbewertete Extensions.
Aber zurück zum Import: Den genauen Namen oder eine Teil des Namens der gesuchten Extension eingeben (hier z.B. kj_imagelightbox2) und den gesuchten klicken. Benötigte Änderungen an der Datenbank bestätigen. Damit sollte die Extension importiert sein und in der Liste der "Loaded Extensions" erscheinen. Hier läßt sich oft auch ein Manual (Beschreibung) der Extension öffnen oder downloaden.   

1. Anlegen einer Seite mit den Bildern
Wir legen eine Seite mit der Bildersammlung an, die im Scroller ablaufen soll.
Dazu mit Klick auf Web/Funktionen eine neue Seite (in unserem Beispiel: b_neon) anlegen.
In den "Seiteneigenschaften bearbeiten" machen wir das Häkchen bei "Im Menu verstecken" - ist ja nur eine Sammlung.
Einen "Neuen Datensatz anlegen" vom Typ "Nur Bilder".
Im Bereich "Bilder" können vorher hochgeladene Bilder aus der "Dateiliste" durch Klick auf das Ordnersymbol geladen werden. Auch kann hier die Reihenfolge der Bilder im späteren Scroller gesteuert werden.
Für unser Beispiel sollten die Bilder "unten mittig" positioniert werden, 1-spaltig, mit einer Breite von 300 Pixeln (also verkleinert angezeigt) und der Option "Activate Imagelightbox v2" aktiviert. Bitte Häkchen setzen!
Auch mit den anderen Optionen dieser tollen Extension kann hier experimentiert werden.

Wichtig: die "ID" des Datensatzes in der Seite muss für später gemerkt werden. Diese ID findet man in eckigen Klammern hinter dem Titel Seiteninhalt [39] oder wenn man im Seitenbaum die Seite (b_neon) anwählt und dann rechts mit der Maus über das Icon über dem Edit-Stift zeigt. Es erscheint dann die ID (hier id=39).

2. Eintrag im Template-Setup
Nun werden wir im Bereich "Setup" des Typo3-Templates ein paar Zeilen Typoscript anhängen:
Klick auf Web/Template und im Seitenbaum auf die Seite, die das Template enthält (hier "Home").
Wenn die Meldung "No Template" in Rot erscheint, kann man auch auf "Go to Closest Page with Template" klicken. Dann wir die nächste Template-Seite aufgerufen.
Die Template Informationen bestehen aus mehreren Teilen, wie "Constants" und "Setup". Wir klicken auf den Edit-Stift vor "Setup".

Am Ende des Template-Setup wird angehängt:

lib.neon = RECORDS
lib.neon {
wrap (
<marquee behavior="scroll"
align="center"
direction="up"
height="500"
scrollamount="4"
scrolldelay="50"
truespeed onmouseover=this.stop() onmouseout=this.start() >
<a href='index.php?option=com_rsgallery&page=inline&
id=29&catid=3&limitstart=12'>
|
</marquee>
)
tables = tt_content
source = 39
}

wobei als Wert für "source=" die vorhin gemerkte ID des Bildersammlung-Datensatzes (39) eingetragen wird.
"direction" beschreibt die Laufrichtung des Scrollers
"height" legt die Höhe des Scrollers in Pixeln fest und aus
"scrollamaount" und "Scrolldelay" ergibt sich die Geschwindigkeit.

Speichern nicht vergessen!

3. Anlegen einer Anzeigeseite mit der Extension
Unterhalb der "Home"-Seite soll eine neue Seite angelegt werden, in der der Scroller gezeigt wird.
Dazu mit Klick auf Web/Funktionen eine neue Seite (in unserem Beispiel: Neon) anlegen.
In der Seite dann: Neuen Datensatz anlegen
Typ: Plugins - Typo Script Object
Hier wählen wir dann im Bereich "Plugin Optionen" den TypoScript Object Path, indem wir auf das Zahnrad-Icon rechts neben dem Eingabefeld klicken.
Es wird ein Teil der Struktur des TypoScript-Templates angezeigt. Mit einem Klick auf das "+" vor dem Bereich "lib." klappt das aus und das Script "neon (Records)" kann geklickt und damit ausgewählt werden.
Dadurch verbinden wir die Anzeigeseite mit dem in Schritt 2 erstellten Eintrag im Template/Setup.

So, bitte mal anschauen - schon läuft der Bilder-Scroller und läßt sich klickvergrößern.