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"

Images used are copyrighted and are used for demonstration only.

Download slided.js and include it into your webpage.

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

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.

• 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

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);

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

Please read the License before you download slided.js 1.1

Please read the Frequently Asked Questions before you contact the author.

Version 1.1

• Added scriptable lib version cvi_slide_lib.js

• Initial Release

Please leave any comments at this contact formular.

slided.js and cvi_slide_lib.js are distributed under the Netzgestade Non-commercial Software License Agreement.
License permits free of charge use on non-commercial and private web sites only under special conditions (as described in the license). This license equals neither "open source" nor "public domain". There are also Commercial Software Licenses available.

YOU AGREE TO ALL CONDITIONS OF THIS LICENCE AGREEMENT CONCERNING THE USE OF THE SOFTWARE BY ACCEPTING THIS LICENCE.
IF YOU DO NOT AGREE TO ALL CONDITIONS OF THIS AGREEMENT, YOU SHALL NOT INSTALL THE SOFTWARE, OR USE IT IN OTHER WAYS.