Finn Rudolph

ImageFlow 1.3.0 - Circular and Slideshow mode

ImageFlow, JavaScript, CSS von Finn Rudolph

There is a new ImageFlow version featuring the Slideshow and Circular mode everybody was waiting for. They come with a bunch of options that enable you to customize the behaviour of ImageFlow as you prefer.

They also "play nice" with the previous options. Which was especially tricky to achieve with the circular feature. I had to clone some of the images to make the illusion of an circular animation possible and thereby changed the number of images. That had an impact through the whole code (just search for 'my.circular' in the imageflow.js if you are curious what had to be touched ;D).

I also implemented some other options that came up in the shoutbox often: With animationSpeed you can now slow down the animation for extremely small images. And the path options imagePath and reflectPath enable you to put the reflect_.php files where you want. And it is now possible to display only one image in ImageFlow without crashing the IE. Enjoy!

ImageFlow 1.2 - Now compatible with the iPhone and iPod Touch

ImageFlow, JavaScript, CSS, iPhone, iPod Touch von Finn Rudolph

There is a new ImageFlow version featuring the navigation buttons (next, previous) which has been asked for quite a lot in the shoutbox. The buttons are simply divs with background images, which you can configure via CSS. Check out the navigation buttons example. And there is a new option called imageScaling that completely disables the dynamic resizing, which is very handy for photo slideshows.

Oh, and it is now also compatible with the touch events in the safari browser on the iPhone and iPod Touch! Check the demo video or try it yourself with your iPhone or iPod Touch at testground.finnrudolph.de/js/ImageFlowTouch


ImageFlow on the iPod Touch

ImageFlow 1.1 goes TYPO3

ImageFlow, JavaScript, TYPO3 von Finn Rudolph

Oliver Tempel has implemented ImageFlow 1.1 in a TYPO3 Extension. You can grab yourself a copy of the extension called Flow Image Gallery (the Extension Key is flowgallery) from the Extension Repository.

As that extension is based on the latest ImageFlow version it is only free for non-commercial use. If you want to use it in a commercial project please purchase a ImageFlow TYPO3 License. With that license you will support the programmer of the TYPO3 Extension!

ImageFlow 1.1 - Aspect Ratio and IE7 Tweak

ImageFlow, JavaScript, CSS von Finn Rudolph

There is a new ImageFlow version featuring the aspectRatio option many people wanted. Now the proportions of the ImageFlow container are freely adjustable! Check the Proportion Examples to get an idea what one can do with that. I also added some more options that allow you to manipulate various image relations.

Another feature in this version is a small CSS tweak for the IE7. It enables high-quality bicubic image resampling for the resized images within the ImageFlow container resulting in a huge image quality improvement:



Before: ImageFlow 1.0.3 - IE7 default image resampling


After: ImageFlow 1.1 - IE7 bicubic image resampling


If you are interested in the tweak I highly recommend you the article On UI Quality (The Little Things): Client-side Image Resizing of the Flickr Developer Scott Schiller. But there is also a downside - the CSS does not validate anymore... If you can't life with that simply delete line 18 of the imageflow.css and the IE7 will fall back to its default image resampling.

ImageFlow 1.0.3 online - Smashed a bug

ImageFlow, JavaScript von Finn Rudolph

There is a new ImageFlow version. It is a tiny release, that fixes a bug with the imageFocusM option. It only occured in combination with the slidebar and caused the focussed image to float out of view. But it is fixed now ;D

YouFlow - The ImageFlow and YouTube Mashup

YouFlow, ImageFlow, JavaScript, YouTube, Highslide JS von Finn Rudolph

YouFlow is a mashup combining the JavaScript effects ImageFlow and Highslide JS with the YouTupe API. With YouFlow you can search all the YouTube videos, browse them with ImageFlow and open them with Highslide.

I was annoyed by the limitations of the 'default' YouTube navigation. I wanted more than one video played at a time in one browser window, easy scaling of the videos and a stylish navigation to thumb through the search results.

Think for example browsing with the scrollwheel through fifty videos returned from a "Happy Tree Friends" search. Think playing that videos by letting them highslide in a draggable and resizable player - while you can still browse the search results with ImageFlow. Enjoy ;D

ImageFlow 1.0.2 online - Highslide JS and targets

ImageFlow, JavaScript von Finn Rudolph

There is a new ImageFlow version. It is a small release with a very useful option. The new option is called onClick and with it one can inject JavaScript functions into ImageFlow which will be called... onclick! So what can you do with it? One thing (which many people wanted) is opening images in a new browser window. Check out the new window examples.

Another thing is combining ImageFlow with other JavaScript effects. And this is really cool! For instance you can now easily combine ImageFlow with the Highslide JS! Check out the guide for ImageFlow with Highslide JS including some nice examples.

ImageFlow 1.0.1 online - IE bug smashed

ImageFlow, JavaScript von Finn Rudolph

There is a new ImageFlow version! And with it comes good and bad news. The good news first: It is now fully compatible with the Microsoft Internet Explorer (there were some odd image scaling problems with the IE 6). The bad news is, that you now have to add the width and height attributes to the image tags. If you don't do it all browser fall back nicely to the previous method (grabbing the image dimensions via JavaScript)... and the IE will still fail. I tried a whole lot of other things to avoid this, but (as far as I know) the Internet Explorer has a massive problem getting the correct image size directly via JavaScript.

When I implemented these changes I came up with the idea, that one can even skip the image preloading, for the JavaScript can already grab the image dimensions before the images are actually loaded. This is now an option called preloadImages and should be nice for really large amounts of images.

ImageFlow 1.0 online - Object-oriented

ImageFlow, JavaScript von Finn Rudolph

Finally there is a brand new release of ImageFlow. This one is a big thing, not only because it breaks the magic 1.0 versioning number, it also is finally object-oriented! That means you can call many instances of it on a single website! Therefore I needed to rewrite ImageFlow from scratch, which then was followed by heavy testing und debugging - most of the time for the InternetExplorer. But as a final result it is now even compatible with the IE 5.5 ;D

Writing the code and making it cross browser compatible was the one thing. The other thing is making everybody understand how to use this code gem. So I wrote a Documentation, Installation Guide, updated the FAQ and made a nice Examples site.

ImageFlow is now licensed under a Creative Commons Attribution-Noncommercial 3.0 Unported License. This means you need the author's permission to use ImageFlow on commercial websites. Check the Download Section for further information.

This is also the place I want to give a special thanks to all the people, that gave me a nice feedback and especially those who found bugs and even suggested possible workarounds. Thank you!

ImageFlow has been moved to a shiny new server

ImageFlow von Finn Rudolph

I moved ImageFlow to a new server. It can now be reached via http://imageflow.finnrudolph.de/. If you still use that old 'n ugly URL "http://194.95.111.244/~countzero/scripts/_myImageFlow/" please change it to the new location. I will redirect anyone from the old URL to the shiny new one until it no longer appears ontop of the Google Search results for 'ImageFlow'.

Update (2008 Oct 17): Redirecting from the old URL has been deleted.

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.

ImageFlow goes TYPO3

ImageFlow, TYPO3 von Finn Rudolph

Matthias Stübner has made a Cover-Flow implementation for TYPO3 based on ImageFlow 0.8. Since it is the first version of that plugin, there might be further changes in the future.

BTW: This is the first plugin implementation of ImageFlow for a well known and widespread CMS. Thanks for that one Matthias ;D

ImageFlow Reflections in ASP.NET available

ImageFlow, ASP.NET von Finn Rudolph

Wynn wrote a ASP.NET version of the reflect.php for all the people out there, that don't have a PHP server on their hands. You can have a look at Wynns ImageFlow demo and contact the author of this code via blog@ignite180.com.

"Works the same way that reflect.php is referenced like below with a few differences. Photos must be located on the webserver (start path from root of website with / ), width has been added to redraw dimensions for faster loading of images." - Wynn

Update (2008 Nov 26): I uploaded the ASP.NET reflections again. To make the latest ImageFlow compatible with the reflect.aspx you need to alter the imageflow.js in line 148 to: src = 'reflect.aspx?img='+src+thisObject.reflectionGET;

Reflection_ASPNET.rar (1.6 KB)

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.

ImageFlow 0.2 Refactoring

ImageFlow, JavaScript, Refactoring von Finn Rudolph

Everybody who is interested in optimizing the javascript code of ImageFlow can do this under Refactor :my => code. Actual problems are:

• performance (depends on browser)
• Safari/Mac support

Thanks in advance!

ImageFlow 0.2 online

ImageFlow, JavaScript von Finn Rudolph

Ich habe ImageFlow ein kleines Versionsupdate verpasst und eine Subdomain spendiert. ImageFlow 0.2 kann man jetzt in ein div Container packen und nach Belieben irgendwo und irgendwie skaliert in seine Website implementieren: http://imageflow.finnrudolph.de

ImageFlow 0.1 in Javascript

ImageFlow, JavaScript von Finn Rudolph

Ich habe Michael Perrys Cover Flow in Javascript weiterentwickelt, so dass es verschiedene Bildformate unterstützt und die Bilder unten ausrichtet. Die Idee dahinter ist natürlich Apples Cover Flow in Javascript umzusetzen und dann für eine Bildergallerie zu optimieren. Die Performance ist momentan noch stark vom Browser abhängig. Die erste Demo Version ImageFlow 0.1 ist online!