| Reflex.js 1.2 allows you to add a Cover Flow™ effect (including reflection) to images on your webpages. *Cover Flow is a trademark of Apple Inc.. It uses unobtrusive javascript to keep your code clean. It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. On older browsers, it'll degrade and your visitors won't notice a thing. CVI-lab: Get a fast impression of the effects and their illustration qualities.

## Setting Up

Download "reflex.js" and include it into your webpage.

`<script type="text/javascript" src="`reflex.js`"></script>`

## Using It

To get the effect just add a class="`reflex`" to the image (minimum dimension: 32x32).
The needed vertical space of the canvas element will grow by the height of the reflection, plus the height of the distance.

## Classes

- Initialisation class "`reflex`"
- vary the reflection by adding idistance followed by the desired height in pixel:
  Reflection distance class "`idistance`" - min=0 max=100 default=0
- vary the reflection by adding iheight followed by the desired height in percent:
  Reflection height class "`iheight`" - min=10 max=100 default=33
- vary the reflection by adding iopacity followed by the desired opacity in percent:
  Reflection opacity class "`iopacity`" - min=0 max=100 default=33
- vary the border by adding iborder followed by the desired wide in pixel:
  Border wide class "`iborder`" - min=0 max=100 default=0
- vary the border by adding icolor followed by the desired color as hex:
  Border color class "`icolor`" - min=000000 max=ffffff default=f0f4ff
- vary the 3D Z-Tilt direction by adding one of the following:
  Z-Tilt direction class "`itiltright`" or "`itiltnone`" or "`itiltleft`"
  by default "reflex.js" cycles through [right|none|left].

## Scripting

If you want flexibility, use "cvi_reflex_lib.js" instead of "reflex.js". You can make your images respond to user actions (e.g. changing one or more options when the image is hovered over).

Set defaults using Javascript
  `cvi_reflex.defaultTilt = 'none'; `//STR 'n|l|r'-'none|left|right'`
  cvi_reflex.defaultHeight = 33; `//INT 10-100 (%)`
  cvi_reflex.defaultDistance = 0; `//INT 0-100 (px)`
  cvi_reflex.defaultTransparency = 50; `//INT 1-100 (%)`
  cvi_reflex.defaultBorder = 0; `//INT 0-20 (px)`
  cvi_reflex.defaultColor = '#ffffff'; `//STR '#000000'-'#ffffff'`
  cvi_reflex.defaultBoxmode = false; `//BOOLEAN``

Add images using Javascript
  `cvi_reflex.add(`image`, `options`);`
  `image` should be an image element: document.getElementById("myimg")
  `options` can contain one or more values: {`tilt`: value, `height`: value, `distance`: value, `transparency`: value, `border`: value, `color`: value, `boxmode`: value}
  Example:
    `cvi_reflex.add(document.getElementById("myimg"), { `height`: 25, `distance`: 10 });`

Modify images using Javascript
  `cvi_reflex.modify(`image`, `options`);`
  If the image has already an effect but a `option` value has changed, the effect will be changed accordingly.
  Example:
    `cvi_reflex.modify(document.getElementById("myimg"), { `tilt`: "left" });`

Remove effect from an image using Javascript
  `cvi_reflex.remove(`image`);`

## Demonstration

Shows some of the things "reflex.js" does.
First 3 images with class "`reflex`" only, last 3 with "`idistance?? iheight?? iopacity?? iborder? icolor??????`" ...

"`reflex iopacity50`"
"`reflex iopacity75`"
"`reflex iopacity25`"

Images used are copyrighted and are used for demonstration only.

## Why use Javascript Reflex Image?

- Fast and easy to implement. Just add class="``" to the image and your good to go.
- Don't need to spend time in an image editor creating an Cover Flow™ image effect.
  *Cover Flow is a trademark of Apple Inc..
- Works really well with forum avatars. Doesn't require additional server work.
- It's dead easy to change the attributes of the images.
- Free of charge use on non-commercial and private web sites.

In older browsers, the script degrades and your visitors won't notice a thing.

## Restrictions

Opera do not support printing of canvas.

## History

Version 1.2

- Added scriptable lib version cvi_reflex_lib.js

Version 1.1

- Added IE support for `itiltleft` and `itiltright`

Version 1.0

- Initial Release
- Added support for Internet Explorer 6/7
  (`itiltleft` and `itiltright` is still missing)

## Credits

The inspiration for the script came from apples Cover Flow™.

## License

Reflex.js is distributed under this LICENSE. License permits free of charge use on non-commercial and private web sites only. There are also Commercial Software Licenses available.

Images used are copyrighted and are used for demonstration only.

cvi.netzgesta.de also visit CVI-lab, S5 Reloaded and AJAX-FilmDB