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!

JavaScriptObject 0.9.3

JavaScriptObject, JavaScript, CSS von Finn Rudolph

There is a new JavaScriptObject package that comes with some code improvements and a new option called lock. If activated the rotation will be locked at the given boundaries: One can only spin the object around one time and not infinitely. Check out the locking examples and if you're interested in the codebase feel free to take a look at the github repository of JavaScriptObject.

JavaScriptObject 0.9.1 - C.O.F.F.E.E. Scripts

JavaScriptObject, JavaScript, CSS, CINEMA 4D, C.O.F.F.E.E. von Finn Rudolph

There is a new JavaScriptObject package that features two very handy scripts written in C.O.F.F.E.E. (the scripting language of CINEMA 4D). Until now it was very hard to create an animation in CINEMA 4D that rotates an object with a given step width around two axes and renders the frames. Basically this could be done with the timeline, but that would require an awful lot of stupid work - like setting 40 key frames with different H and P rotation values... by hand!

And since we have more important stuff to do I made two C.O.F.F.E.E. scripts that automatically do the boring work for us. There is a new step by step tutorial on how to install and use the scripts. It's really simple and you finally can render 3D models that can be rotated around two axes in a very high quality:

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

JavaScriptObject - Export from CINEMA 4D

JavaScriptObject, JavaScript, CSS, CINEMA 4D von Finn Rudolph

The new tutorial explains how to render frames of a 3D model in Maxons CINEMA 4D R11 that can be directly used with JavaScriptObject to build a 360° rotation. It features a Step by Step guide and ends with a nice 360° - Mini Cooper as a result.


The model I used in this tutorial is a Free CINEMA 4D model made by Gilles Tran.

JavaScriptObject 0.9 - Now compatible with the iPhone and iPod Touch

JavaScriptObject, JavaScript, CSS von Finn Rudolph

There is a new JavaScriptObject version featuring support for the iPhone and iPod Touch. You can test the demo shown in the video beneath at testground.finnrudolph.de/js/JavaScriptObject


JavaScriptObject on the iPod Touch


I also wrote a small JavaScript application to understand the basic touch events of the iPod Touch and iPhone browser Safari. That means only one finger, no gestures. You can watch the Demo or try it yourself with your iPhone or iPod Touch at testground.finnrudolph.de/js/iTouchEvents

JavaScriptObject 0.8.2 and a Demo Website

JavaScriptObject, JavaScript, CSS von Finn Rudolph

There is a new JavaScriptObject version featuring grabbing hand cursors for all browsers* and a nicer lazy loading design. Both increasing the usability of the script. It now also has a stylish demo website at javascriptobject.finnrudolph.de.


*Except Opera which does not support the CSS cursor:url() everyone else supports!

JavaScriptObject - Export from SketchUp

JavaScriptObject, JavaScript, CSS, SketchUp von Finn Rudolph

The tutorial explaining how to export frames from Google SketchUp models for JavaScriptObject is now complete. It features a general Step by Step guide, two examples on how to export 360° objects and full XY revolution objects and some rendering quality tweaking to get the best rendering result. Enjoy and happy rendering!

JavaScriptObject aka 3D objects in JavaScript

JavaScriptObject, JavaScript, CSS von Finn Rudolph

Finally, after some weeks of fun with JavaScript and skripting Google SketchUp with Ruby I proudly present JavaScriptObject!

JavaScriptObject is an application to publish 3D models in a userfriendly way. It does not require any applets, plugins or similar. JavaScriptObject works with every browser, that can handle images and supports JavaScript. It is easy to implement, documented and configurable.

Features

• 3D rotation / 360° rotation
• Supports multiple instances (Object-oriented)
• Easy implementation (Unobtrusive JavaScript)
• Compatible with all graphical browsers
• JavaScript & CSS compressable to 7 KB
• Graceful Degradation
• Loading bar
• Implementation and configuration by one img tag
• Supports lazy loading

Demo

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.

Cross-browser compatible right click context menu in JavaScript

CSS, JavaScript von Finn Rudolph

Phew... that was fun ;D This is a proof of concept. It shows, that one can create a cross-browser compatible right click context menu in JavaScript. And it now even works with Opera (if the user enables some browser settings, which are disabled by default). If you are interested in the Opera Workaround check the Opera forum thread. See the running code at:

http://testground.finnrudolph.de/js/right_click_menu


And if you are interested in the madness behind it I highly recommend reading Javascript Madness: Mouse Events by Jan Wolter.

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 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 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!