Erik Pöhler

Imageflow 0.8

Dieser Ansatz ist vor allem durch die Cover Flow Technik bekannt geworden, welche von dem Künstler Andrew Coulter Enright entwickelt wurde und nun - von Apple aufgekauft - unter anderem in iTunes zum Einsatz kommt.

Imageflow nennt sich ein feines Javascript, welches eine beliebige Anzahl Bilder auf stylische Weise darstellt. Auf jeden Fall mal ansehen! Auch wer wie ich nicht unbedingt auf Effekthascherei steht wird zugeben müssen, dass es nicht nur sehr platzsparend und leicht zu bedienen ist. Es sieht in erster Linie auch sehr gut aus. Leider benötigt die intensive clientseitige Größenberechnung der Bilder einiges an Ressourcen. Wie gut bzw. wie flüssig die Animation abläuft hängt sowohl von der Rechnerleistung und der Geschwindigkeit des jeweiligen Browsers beim Ausführen des Javascripts ab. Hier machen IE und Safari keine gute Figur.

Für Anhänger von Javascript-Frameworks heißt es vorerst abwarten, doch es wird wohl nur eine Frage der Zeit sein bis es Ports für die speziellen Frameworks gibt. Momentan gibt es neben dem Originalskript noch eine MooTools-Variante. Ich hoffe dass da auch bald was für jQuery kommt.

Beispielintegration in WordPress - PHP-Codeschnipsel

Für den Moment funktioniert es aber ohne großen Aufwand: 1) Javascript eingebunden 2) ein Verzeichnis für Bilder erstellt 3) einen eigenen Unterordner /cache/ für die Reflexionen angelegt 4) nun nur noch eine einfache Funktion erstellt, die im Verzeichnis nach Bildern sucht und diese ausgibt. Dabei werden Bildbeschreibungen automatisch aus dem Dateinamen generiert.

So braucht man lediglich Bilder ins passende Verzeichnis hochladen und die Galerie wächst. Noch einfacher und hübscher geht das sicher nicht.
Hier ein Beispiel, wie die Funktion aussehen kann, die die Bilder in einem Verzeichnis findet und ausgibt. (In meinem Fall, einem WordPress-Theme habe ich diese Funktion einfach in die Dateui functions.php des Themes gepackt.)

1. 1.function generate_imageflow_images() {
2. 2.$photo_directory="bilder/"; // include trailing slash
3. 3.$index_directory=$photo_directory; // directory indexed for photos (for instance, you could instead index your thumbnail directory)
4. 4.$file_extension=".jpg"; // extension
5. 5.$sep = "_"; // this char will be replaced with white-space for displaying an image-title
6. 6.$sort=2; // 0: no sorting; 1: sorts files alphabetically; 2: sorts files by date
7. 7.$dir=opendir($index_directory);
8. 8.if ($sort==2) {
9. 9.while($file=readdir($dir)) {
10. 10.if (strrchr($file,".")==$file_extension) {
11. 11.$files[filectime($index_directory . $file) . $file]=$file;
12. 12.}
13. 13.}
14. 14.} else {
15. 15.while ($file=readdir($dir)) {
16. 16.if (strrchr($file,".")==$file_extension) {
17. 17.$files[$file]=$file;
18. 18.}
19. 19.}
20. 20.}
21. 21.closedir($dir);
22. 22.if ($sort>0) {
23. 23.ksort($files);
24. 24.}
25. 25.foreach ($files as $key => $val) {
26. 26.$clean[substr($val, 0, -(strlen($file_extension)))] = $val;
27. 27.}
28. 28.foreach ($clean as $desc => $filename) {
29. 29.printf(
30. 30."<img src=\"%1$s/path/to/reflect.php?img=%2$s%3$s&fade_start=40\" alt=\"%4$s\" />",
31. 31.get_bloginfo('url'),
32. 32.$photo_directory,
33. 33.$filename,
34. 34.str_replace(array("_","-"), " ", $desc));
35. 35.}
36. 36.}