CVI
slided.js 1.5 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+, 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.

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"

Images used are copyrighted and are used for demonstration only.

Setting Up

Download slided.js and include it into your webpage.

// only if you want to use the annotation feature...
<script type="text/javascript" src="cvi_text_lib.js"></script>
// ...else this one only...
<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 lib

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
If cvi_text_lib.js is loaded also...
cvi_slide.defaultText = ''; //STR
cvi_slide.defaultTextcolor = '#000000'; //STR '#000000'-'#ffffff'
cvi_slide.defaultFontattr = [100,100,100]; //OBJ [1-200==weight, 10-400==width, 10-1000==space]
If cvi_filter_lib.js is loaded also...
cvi_slide.defaultFilter = null; //OBJ [{f='grayscale'},{f='emboss', s:1}...]

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, text: value, textcolor: value, fontattr: [value,value,value], filter: value }
Examples:
cvi_slide.add(document.getElementById("myimg"), { shadow: 75, shade: 20 });
<img onLoad="cvi_slide.add(this, { 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);

Support libs

If you are using the more flexible "cvi_slide_lib.js" instead of "slided.js", you'll get access to additional features by the following support libraries (part of distribution):

Why use Javascript Image Slides?

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

Download

Please read the license before you download slided.js 1.5

F.A.Q.

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

History

Version 1.5

Version 1.4 Version 1.31 Version 1.3 Version 1.2 Version 1.1 Version 1.0

Contact

Please leave any comments at this contact formular.

License

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.

Other Projects

slided.netzgesta.de © 2014 by Christian Effenberger feed   twitter   facebook   myspace   delicious   digg   reddit   magnoliacom   newsvine   furl   google   yahoo   blinklist   mister-wong