README.md
1#ImageFlow - a flowing Gallery
2
3ImageFlow is originally based up on [Finn Rudolph's](http://imageflow.finnrudolph.de) implementation of the elegant Apple-like CoverFlow gallery. It has been rewritten in 2010-01 anbd again for jQuery in 2014-02. It only shares the core calculations with the original. The current version also supports multiple flow components in one page and comes absolutely free.
4
5You 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.
6
7##Features
8 * CoverFlow Gallery from namespaces and single images
9 * enable / disable reflections, [created by iReflect](https://github.com/i-net-software/dokuwiki-plugin-reflect)
10 * click- and draggable scroll bar
11 * mouse wheel support
12 * images can be clicked to pop out (needs the [PopUp Viewer](https://github.com/i-net-software/dokuwiki-plugin-popupviewer) plugin)
13 * 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.
14 * plugin can be used for custom implementations (if you would like to know how that works, please contact our support)
15
16##Syntax
17
18```
19<imageflow %NAMESPACE%></imageflow>
20
21or:
22
23<imageflow>
24<image %IMAGE%[?width=%WIDTH%&linkto=%LINKTO%]>%DESCRIPTION%</image>
25</imageflow>
26```
27
28Option|Description
29------|-----------
30__``%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
31__``%IMAGE%``__|an Image as you know it from DokuWiki - but it does not yet support any known options
32__``%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”
33__``%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.
34__``%DESCRIPTION%``__ (optional)|You can give an alternate description here, to display some description if no IPTC Caption meta-data is set
35
36You can use your images names or page names as anchors. This will directly pop out the item after the imageflow loaded.
37
38##Customizing the Styles
39
40ImageFlow 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.
41
42Selector|What is it?|Property / Default Value
43--------|-----------|------------------------
44``div.imageflow_wrapper.scripting_active``|Background Color of the viewport when javascript is enabled|``background-color: __darker__ !important``
45``div.imageflow_caption``|Text Color of the Captions|``color: #fff``