| Slided.js 1.1 allows you to add slide frames and shadow to images on your webpages (alternatively: filmed.js). It uses unobtrusive javascript to keep your code clean. It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, IE6+ and Safari. 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

Include "slided.js" into your webpage.

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

## Using It

To make it look like a slide just add a class="`slided`" to the image (minimum dimension: 80x? /?x80).
To get an aspect ratio of 1:1 the larger picture dimension defines the width and height. Therefor the needed space of the canvas element will grow if the aspect ratio of the picture doesn't fit 1:1.

## Classes

- Initialisation class "`slided`"
- vary the shading by adding ishade followed by the desired opacity in percent:
  Shading opacity class "`ishade`" - min=0 max=100 default=50
- vary the shadow by adding ishadow followed by the desired opacity in percent:
  Shadow opacity class "`ishadow`" - min=0 max=100 default=40
- vary the shadow by adding noshadow:
  Noshadow class "`noshadow`" - default=false
- vary the decoration by adding nocircles:
  Nocircles class "`nocircles`" - default=false
- vary the frame by adding ibgcolor followed by the desired color as hex:
  Frame color class "`ibgcolor`" - min=000000 max=ffffff default=0
- vary the frame by adding igradient followed by the desired color as hex:
  Gradient color class "`igradient`" - min=000000 max=ffffff default=0
- Default gradient direction is diagonally
- vary the color gradient direction by adding horizontal:
  Horizontal gradient class "`horizontal`" - default=false
- vary the color gradient direction by adding vertical:
  Vertical gradient class "`vertical`" - default=false

## Scripting

If you want flexibility, use "cvi_slide_lib.js" instead of "slided.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_slide.defaultShade = 50; `//INT 0-100 (% opacity)`
  cvi_slide.defaultShadow = 40; `//INT 1-100 (% opacity)`
  cvi_slide.defaultColor = 0; `//STR '#000000'-'#ffffff' or 0`
  cvi_slide.defaultColor2 = 0; `//STR '#000000'-'#ffffff' or 0`
  cvi_slide.defaultGradient = 'd'; `//STR 'd|h|v'-'diagonally|horizontal|vertical'`
  cvi_slide.defaultNoshadow = false; `//BOOLEAN`
  cvi_slide.defaultNocircles = false; `//BOOLEAN``

Add images using Javascript
  `cvi_slide.add(`image`, `options`);`
  `image` should be an image element: document.getElementById("myimg")
  `options` can contain one or more values: {`shadow`: value, `shade`: value, `color`: value, `color2`: value, `gradient`: value, `noshadow`: value, `nocircles`: value}
  Example:
    `cvi_slide.add(document.getElementById("myimg"), { `shadow`: 75, `shade`: 20 });`

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

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

## Demonstration

Shows some of the things "slided.js" does.
4 images with class = "`slided ibgcolorXXXXXX`" and different frame colors.

4 images with class = "`slided ibgcolorXXXXXX igradientXXXXXX`" and different gradient directions

no gradient

diagonally

horizontal

vertical

"`noshadow nocircles`"

"`ishadow20`"

"`ishade01`"

"`ishade75`"

## Why use Javascript Image Slides?

- Fast and easy to implement. Just add class="slided" to the image and your good to go.
- Don't need to spend time in an image editor creating images with effects.
- 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.1

- Added scriptable lib version cvi_slide_lib.js

Version 1.0

- Initial Release

## License

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

Images used are copyrighted and are used for demonstration only.

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