ImageFlow - a flowing Gallery

ImageFlow is originally based up on Finn Rudolph's implementation of the elegant Apple-like CoverFlow gallery. It has been rewritten in 2010-01 and does only share the core calculations with its original. The current version also supports multiple flow components in one page and comes absolutely free.

You can either give a namespace and display all the images, or you can define a list of images that will be shown (see the options). If you defined some meta-data for your images (currently supported: IPTC.title and IPTC.caption - these can be defined in the media manager) ImageFlow will display them below the scroll bar.

Features

CoverFlow Gallery from namespaces and single images
enable / disable reflections, created by iReflect
click- and draggable scroll bar
mouse wheel support
images can be clicked to pop out (needs the PopUp Viewer plugin)
fallback image implementation - meaning: when an image is not being loaded within a certain time frame - ant alternative iamge is being displayed until the image has been loaded.
plugin can be used for custom implementations (if you would like to know how that works, please contact our support)

Syntax

<imageflow %NAMESPACE%></imageflow>

or:

<imageflow>
<image %IMAGE%[?width=%WIDTH%&linkto=%LINKTO%]>%DESCRIPTION%</image>
</imageflow>

Option	Description
`%NAMESPACE%`	If this is given, the following won't matter. The plugin then reads all images from the given namespace and builds the flow-scroller
`%IMAGE%`	an Image as you know it from DokuWiki - but it does not yet support any known options
`%WIDTH%` (optional)	Width in px. The only option that should be given, so that DokuWiki will return smaller Images and the browser won't have to load and re-render all the images at this point. The recommended width is “200”
`%LINKTO%` (optional)	Here you can set a wiki page. If this is given, the user will be redirected to the wiki page, instead of getting a popup when clicking the image.
`%DESCRIPTION%` (optional)	You can give an alternate description here, to display some description if no IPTC Caption meta-data is set

You can use your images names or page names as anchors. This will directly pop out the item after the imageflow loaded.

Customizing the Styles

ImageFlow has a predefined set of colors. If you want to change them to your needs, you can either do so in your template or use the file conf/userstyle.css. The following table shows the css selector and the properties that can be changed.

Selector	What is it?	Property / Default Value
`div.imageflow_wrapper.scripting_active`	Background Color of the viewport when javascript is enabled	`background-color: __darker__ !important`
`div.imageflow_caption`	Text Color of the Captions	`color: #fff`

What comes next?

What is your favorite next feature for ImageFlow?

Download

Version	Requirement
2010-01-27	see previous version
2010-01-18	see previous version
2010-01-04	latest DokuWiki release popUp Viewer (optional) iReflect (optional)

See Previous Versions

Version	Requirement
2009-10-23	see previous version
2009-08-18	see previous version
2009-06-05	see previous version
2009-04-14	latest DokuWiki release miniAJAX iReflect
2009-03-18	see previous version
2009-03-05	see previous version
2009-03-02	see previous version
2009-02-26	see previous version
2009-02-23	see previous version
2009-02-05	see previous version
2009-01-23	see previous version
2009-01-22	see previous version
2009-01-15	see previous version
2008-06-04	latest DokuWiki release miniAJAX iReflect

Demo

This website uses imageFlow for displaying screenshots and rendered report files from our solution i-net Clear Reports

Changes

2010-01-04: completely rewritten
- support for multiple ImageFlows in one page
- the flow scroller and the pop out component have been separated
- the miniAjax not needed any more

Less recent changes

Support

If you need help or have suggestions on how to improve this plugin, feel free to contact us