Filmed.js 1.2 allows you to add film strips and shadow to images on your webpages (alternatively: slided.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 "filmed.js" into your webpage.

Using It

To make it look like a strip just add a class="filmed" 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 "filmed"
• vary the strip by adding icolor followed by the desired color as hex:
  Strip color class "icolor" - min=000000 max=ffffff default=000000
• vary the transparency by adding istrip followed by the desired opacity in percent:
  Strip opacity class "istrip" - min=0 max=100 default=100
• vary the shining by adding ishine followed by the desired opacity in percent:
  Shining opacity class "ishine" - min=0 max=100 default=25
• vary the shadow by adding ishadow followed by the desired opacity in percent:
  Shadow opacity class "ishadow" - min=0 max=100 default=33
• vary the shadow by adding softshadow: (use on large images only)
  Softshadow class "softshadow" - default=false
• vary the shadow by adding noshadow:
  Noshadow class "noshadow" - default=false

Scripting

If you want flexibility, use "cvi_strip_lib.js" instead of "filmed.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_strip.defaultStrip = 100; //INT 1-100 (% opacity)
cvi_strip.defaultShine = 25; //INT 1-100 (% opacity)
cvi_strip.defaultShadow = 33; //INT 1-100 (% opacity)
cvi_strip.defaultColor = '#000000'; //STR '#000000'-'#ffffff'
cvi_strip.defaultNoshadow = false; //BOOLEAN
cvi_strip.defaultSoftshadow = false; //BOOLEAN

Add images using Javascript

cvi_strip.add(image, options);
image should be an image element: document.getElementById("myimg")
options can contain one or more values: {strip: value, shadow: value, shine: value, color: value, noshadow: value, softshadow: value}

Example:

cvi_strip.add(document.getElementById("myimg"), { shadow: 75, shine: 20 });

Modify images using Javascript

cvi_strip.modify(image, options);
If the image has already an effect but a option value has changed, the effect will be changed accordingly.

Example:

cvi_strip.modify(document.getElementById("myimg"), { strip: 90 });

Remove effect from an image using Javascript

cvi_strip.remove(image);

Demonstration

Shows some of the things "filmed.js" does.
    4 images with class = "filmed icolorXXXXXX" and different strip colors.

    4 images with class = "filmed istripXXX" and different transparency of the spot lights

25%

50%

75%

100%

"noshadow istrip50"

"ishadow50"

"ishine01"

"istrip50 icolor402000"

Why use Javascript Image Strips?

• Fast and easy to implement. Just add class="filmed" 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

• Modified code due to new opera (9.5) weaknesses

• Added scriptable lib version cvi_strip_lib.js

• Initial Release

License

Filmed.js is distributed under this LICENSE. 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.

Images used are copyrighted and are used for demonstration only.

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