| Instant.js 1.5 allows you to add an instant picture effect (including tilt) to images on your webpages (alternatively: slided.js or filmed.js). 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 "instant.js" and include it into your webpage.

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

## Using It

To get the instant picture effect just add a class="`instant`" to the image (minimum dimension: 64x64).

## Classes

- Initialisation class "`instant`"
- vary the shadow by adding ishadow followed by the desired opacity in percent:
  Shadow opacity class "`ishadow`" - min=0 max=100 default=33
- vary the frame by adding icolor followed by the desired color as hex:
  Frame color class "`icolor`" - min=000000 max=ffffff default=f0f4ff
- vary the tilt direction by adding one of the following:
  Tilt direction class "`itiltleft`" or "`itiltnone`" or "`itiltright`"
  by default "instant.js" cycles through [left|none|right].
- prevent the shading by adding noshading:
  Shading off class "`noshading`"
- preserve the image aspect ratio by adding preserve:
  Image aspectratio class "`preserve`"

## Scripting

If you want flexibility, use "cvi_instant_lib.js" instead of "instant.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_instant.defaultTilt = 'none'; `//STR 'n|l|r'-'none|left|right'`
  cvi_instant.defaultShade = 33; `//INT 0-100 (% opacity)`
  cvi_instant.defaultShadow = 33; `//INT 0-100 (% opacity)`
  cvi_instant.defaultColor = '#f0f4ff'; `//STR '#000000'-'#ffffff'`
  cvi_instant.defaultNoshade = false; `//BOOLEAN`
  cvi_instant.defaultPreserve = false; `//BOOLEAN``

Add images using Javascript
  `cvi_instant.add(`image`, `options`);`
  `image` should be an image element: document.getElementById("myimg")
  `options` can contain one or more values: {`tilt`: value, `shadow`: value, `shade`: value, `color`: value, `noshade`: value, `preserve`: value }
  Example:
    `cvi_instant.add(document.getElementById("myimg"), { `shadow`: 75, `shade`: 10 });`

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

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

## Demonstration

Shows some of the things "instant.js" does.
First image with class = "`instant itiltleft icolor000000 ishadow50`" all other images with class = "`instant`" only...

## Why use Javascript Instant Image?

- Fast and easy to implement. Just add class="instant" to the image and your good to go.
- Don't need to spend time in an image editor creating an Polaroid™ image effect.
  *Polaroid is a trademark of Polaroid Corporation.
- 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.

## History

Version 1.5

- Added support to presere image aspect ratio

Version 1.4

- Added scriptable lib version cvi_instant_lib.js

Version 1.3

- Added soft shadow support for IE
- Added `noshading` class

Version 1.2

- Added support for img attributes:
  `id alt title src onclick`

Version 1.12

- IE bug fixing

Version 1.11

- Changed minimum dimension to 64x64

Version 1.1

- Added support for Internet Explorer 6/7

Version 1.0

- Initial Release

## Credits

The inspiration for the script came from polaroid.rb.

## License

Instant.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