Finn Rudolph

ImageFlow 0.9 - Highslide JS compatible

ImageFlow, JavaScript, PHP von Finn Rudolph

Thanks to Ceasar Feijen there now is a Highslide JS compatible ImageFlow version available. You can single click the centered image or double click any image in the ImageFlow and it will highslide. The highslided image can be arranged by drag 'n drop anywhere on the website. Enjoy!

Please note, that Highslide JS is licensed under a Creative Commons Attribution-NonCommercial 2.5 License. This means you need the author's permission to use Highslide JS on commercial websites.

ImageFlow 0.9 online - Happy Debugging Release

ImageFlow, JavaScript, PHP von Finn Rudolph

A new ImageFlow version has been released. I recently had some time to implement all the nice bug killing workarounds that had been posted in the shoutbox. Thanks to all of you, that came up with such a solution!

• Fixed the IE bug (Invalid Argument, line 141, character 4)
• Fixed the selection bug (ugly text and image selection on slider dragging)
• Fixed the back button bug (using the back button with Safari 3 or Opera sometimes crashed ImageFlow)

Since this release is debugging only, you can update your implementation by simply replacing the imageflow.js with the new one.

Emezeta PHP Card - Reference cheat sheet

PHP von Finn Rudolph

Das PHP Card Reference Cheat Sheet stellt alle PHP Funktionen, Parameter, Datentypen etc. auf einer DIN Seite übersichtlich dar. Man kann sich die Übersicht auf dem Blog von José Román aka Manz als PNG oder PDF für den Druck herunterladen.

ImageFlow 0.8 Compatibility Check

ImageFlow, JavaScript, PHP von Finn Rudolph

I just tested the ImageFlow browser compatibility with the very useful webservice browsershots.org. I checked ImageFlow version 0.8 and the results are stunning: It is fully compatible with 21 out of 26 tested browsers! One browser seems to be behave strange and 4 fail completely.

But those browsers that fail are such outdatet things as the InternetExplorer 5.5 or Phoenix. Check the Screenshot Results for the complete browser list.

ImageFlow 0.8 online

ImageFlow, JavaScript, PHP von Finn Rudolph

A new ImageFlow version has been released. The main feature of that version is the compatibility with Safari 1+ ! Now every graphical browser - that has JavaScript enabled - should handle ImageFlow. I have found no such browser, that does not. It would be nice, if you post some of your browser compatibility experiences in the Shoutbox!

Another new feature is the support of image links. You can now store a URL in the longdesc attribute of an img tag. A doubleclick - or a single click if it is focussed - will redirect you to that URL. See the Changelog for the other stuff, that has been changed:

• Added Safari 1.x compatibility (a very big thanks to Stephan Droste!)
  
• Added image link events onclick and ondblclick: the link is directly stored in the longdesc attribute of the image tag
  
• Improved image scaling: now all image formats will stay inside the main div container "imageflow"
  
• Minor performance improvements
  

ImageFlow 0.7 online

ImageFlow, JavaScript, PHP von Finn Rudolph

This brand new version of ImageFlow features some massive implementation improvements. The best thing first: now all the JavaScript is stored inside the imageflow.js! Even the onclick event handling of the images - which was kind of tricky to implement.

I also changed the caption handling. Each caption is now directly stored within the alt attribute of the img tag (big thanks to Simone Onofri for that idea ;D). See the Changelog for the other stuff, that has been changed:

• Added different cursor types
• Added configuration variables
• Changed implementation: all JavaScript is now stored inside the imageflow.js
• Changed the captions handling: now the caption text is directly stored in the alt attribute of the image tag
• Fixed a bug (description)

ImageFlow 0.6 online - Documentation in progress

ImageFlow, JavaScript, PHP von Finn Rudolph

For ImageFlow caused a international feedback - see the Google Analytics map below - this newsblog entry is in English. But beware: As I'm not a native English speaker there may be some language mistakes ;D



This new version of ImageFlow features a browsercompatible arrow key support and some usability improvements concerning the mouse wheel use and the embedding of the imageflow div container. ImageFlow now just interacts on mouse wheel events if the cursor is over the main div container "imageflow". This enables the user to scroll a long website and to navigate through the images with his mouse wheel.



I currently write on a documentation of ImageFlow, which covers FAQ and some other stuff, that might be of interest. The English translation of it is in progress...

ImageFlow 0.5 online

ImageFlow, JavaScript, PHP von Finn Rudolph

Nach einigen Benchmarks zur JavaScript Performance von aktuellen Browsern und vor allem nach einigen Performance Tests mit Opera hat sich die Render Engine der Browser als Flaschenhals herausgestellt. Alle Browser versuchen die Qualität der in den Abmessungen geänderten Bilder durch Interpolation zu verbessern. Diese Filter sind ziemlich rechenintensiv und je nachdem wie stark sie auf die Bilder angewandt werden (oder wie gut diese Filter programmiert sind) senkt es die Leistung von ImageFlow.



Um diesen Effekt in Grenzen zu halten, aber trotzdem viele Bilder (>100) mit ImageFlow darstellen zu können habe ich eine Fokus Funktion implementiert. Es werden nur die Bilder dargestellt - und somit vom Browser optimiert -, welche im Fokus des Betrachters liegen. Damit das bei vielen Bildern nicht unübersichtlich wird und vor allem noch benutzerfreundlich bleibt, gibt es dazu einen Scrollbalken.

ImageFlow 0.4 online - Performance Benchmarking

ImageFlow, JavaScript, PHP von Finn Rudolph

Die vierte Version von ImageFlow ist mit zwei neuen Features online. Das Mausrad kann jetzt zum durchblättern benutzt werden. Und während die Bilder vom Browser geladen werden sieht der Benutzer einen Ladebalken. Die Funktionen von ImageFlow im Überblick:

• Unterstützt alle Bild-Seitenverhältnisse
• Dynamische Spiegelreflexionen (serverseitig via PHP)
• 100% JavaScript (bis auf die Reflexion)
• Mausrad Unterstützung
• Ladebalken
• Bildunterschrift
• Skaliert 100% dynamisch
• Einbindung durch div Tags
• Kompatibel mit allen aktuellen Browsern

Seit der ersten Version, welche auf dem Code von Michael Perrys Cover Flow in Javascript aufbaute, habe ich versucht die Performance von ImageFlow zu optimieren. Version 0.4 scheint in dieser Hinsicht das Optimum zu sein. Die Versionsschritte kann man unter Refactor :my => code nachvollziehen.

Leider gibt es immer noch starke Performanceschwankungen zwischen den unterschiedlichen Browsern. Um das messbar zu machen, habe ich ein 10 Sekunden Benchmark für ImageFlow programmiert: http://benchimageflow.finnrudolph.de


Das Benchmark ermittelt die durchschnittliche Geschwindigkeit, mit der ein Browser die zentrale Schleife in ImageFlow durchläuft. Je schneller die Berechnung, desto flüssiger sollte die Animation sein. Unter Windows habe ich damit folgende Ergebnisse erzielt:
Benchmarkergebnisse in ms für 10 Bilder (weniger ist besser)

Schon bei einem Benchmark mit 10 Bildern stellt man fest, dass die JavaScript Performance von Opera weit hinter der von anderen aktuellen Browsern liegt. Da ImageFlow aber auch mit sehr vielen Bildern funktionieren soll, habe ich die Browser mit einem 100 Bilder Benchmark getestet:
Benchmarkergebnisse in ms für 100 Bilder (weniger ist besser)

Was sich in dem kleinen Benchmark schon abgezeichnet hat nimmt hier erstaunliche Ausmaße an. Während alle Browser erwartungsgemäß so um den Faktor 20 herum langsamer geworden sind bricht die Leistung von Opera um den Faktor 77 ein. Mit anderen Worten Opera ist 24 mal langsamer als der schnellste Browser im Benchmark!

ImageFlow 0.3 online

ImageFlow, JavaScript, PHP von Finn Rudolph

ImageFlow hat jetzt serverseitig generierte Reflexionen. Dazu habe ich ein wenig Richard Daveys Easy Reflections v2 manipuliert. Die Bilder werden jetzt dynamisch auf dem Server via PHP mit einer Spiegelreflexion versehen. Wer ImageFlow in seine Seite einbinden will kann sich jetzt auch bequem den ganzen Quelltext herunterladen.