- ImageFlow - Die animierte Bilder-Galerie › Webstandard-Blog

ImageFlow - Die animierte Bilder-Galerie

JavaScript - 30 Sep, 2009

ReTweet
Kommentare (3)

Der von Apple eingeführte und durch die Darstellung für Musiksammlungen im 3-D Effekt bekannt gewordene Coverflow-Effekt, erfreut sich auch auf Webseiten zunehmender Beliebtheit. Wer von euch mit dem Gedanken spielt einen solchen Effekt zu verwenden, den möchte ich an dieser Stelle ImageFlow von Finn Rudolph vorstellen. Dieses von ihm umgesetzte JavaScript ermöglicht es den Anwendern, die PHP ab Version 4.3.2+ auf ihren Servern zu laufen haben, die angebotenen Bilderelemente über verschiedene Arten ( Schieberegler, Scrollrad oder Anklicken der Bilder oder Navigations-Buttons ) anzusteuern. ImageFlow besitzt aber noch weitere interessante Features, denn die Darstellung der Elemente kann wie die folgenden Beispiele zeigen, auf verschiedenste Weisen wie bspw. der Anpassung des Winkels und der Entfernung der Bilder zum Betrachter eingestellt und verändert werden.

ImageFlow - Reflections

ImageFlow - Reflections Die Anpassungen ermöglichen es, dass bspw. die standardmäßig implementierten Spiegelungen ( reflections ) der Grafiken, über lediglich eine Zeile JavaScript ausgeblendet werden können, sofern dieser Effekt nicht gewünscht ist.

ImageFlow - Startup and Behaviour Examples

ImageFlow - Reflections Aber auch die Anpassung wie bspw. bezüglich der Ausgangssituation ( startID ) kann ohne Probleme und großen Auswand, je nach Wunsch angepasst und verändert werden.

ImageFlow - Opacity

ImageFlow - Reflections Ein andere Eigenschaft, deren Veränderung insbesondere bei entsprechend verwendeten Hintergrundgrafiken nützlich sein kann, ist die Anpassung der Transparenz-Werte ( opacity ) der einzelnen Elemente.

ImageFlow Extensions

Wer nun daran interessiert sein sollte dieses Feature vielleicht in seine bestehende Anwendung implementieren zu wollen, dem sei gesagt, dass bereits ImageFlow-Extensions für TYPO3 & TYPOlight, Joomla, Drupal und WordPress zum Download angeboten werden.

Ihr seht, die Anpassungsvaraianten sind vielfältig und vor allem eines, auch für JavaScript-Einsteiger durchaus verständlich und nachvollziehbar. Ein wenig zusätzliches Feedback bietet für Interessierte, auch die Dokumentation, die nochmal auf alle Anpassungen nauml;her eingeht. In seinem Blog informiert Finn in regelmäßigen Abständen über Neuerungen und Anpassungen von ImageFlow oder auch dem JavaScript-Object. In diesem Sinne, viel Spass und Erfolg mit ImageFlow!