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.



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}
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.
cvi_slide.modify(document.getElementById("myimg"), { noshadow: true });

Remove effect from an image using Javascript


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


beautiful landscape



"noshadow nocircles"




Why use Javascript Image Slides?

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


Opera do not support printing of canvas.


Version 1.1 Version 1.0


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.  also visit  CVI-lab, S5 Reloaded and AJAX-FilmDB