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

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

beautiful landscape

horizontal

vertical

"noshadow nocircles"

"ishadow20"

"ishade01"

"ishade75"

Why use Javascript Image Slides?

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 Version 1.0

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