Instant.js 2.21 allows you to add an instant picture effect (including tilt) to images on your webpages (alternatively: slided.js or 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.

Setting Up

Download "instant.js" and include it into your webpage.

Using It

To get the instant picture effect just add a class="instant" to the image (minimum dimension: 64x64).

Classes

• Initialisation class "instant"
• 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 frame by adding icolor followed by the desired color as hex:
  Frame color class "icolor" - min=000000 max=ffffff default=f0f4ff
• vary the tilt direction by adding one of the following:
  Tilt direction class "itiltleft" or "itiltnone" or "itiltright"
  by default "instant.js" cycles through [left|none|right].
• prevent the shading by adding noshading:
  Shading off class "noshading"
• vary the border design by adding historical:
  Frayed border class "historical"
• prevent quadratic corner by adding nocorner:
  Round corner class "nocorner"
• preserve the image aspect ratio by adding preserve:
  Image aspectratio class "preserve"
• vary the annotation text by adding itxtcol followed by the desired color as hex:
  Text color class "itxtcol" - min=000000 max=ffffff default=000000
• get the text from alt attribute by adding itxtalt:
  Text selection class "itxtalt"
• get the text from title attribute by adding itxttitle:
  Text selection class "itxttitle"

Scripting

If you want flexibility, use "cvi_instant_lib.js" instead of "instant.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_instant.defaultTilt = 'none'; //STR 'n|l|r'-'none|left|right'
cvi_instant.defaultShade = 33; //INT 0-100 (% opacity)
cvi_instant.defaultShadow = 33; //INT 0-100 (% opacity)
cvi_instant.defaultColor = '#f0f4ff'; //STR '#000000'-'#ffffff'
cvi_instant.defaultNoshade = false; //BOOLEAN
cvi_instant.defaultNocorner = false; //BOOLEAN
cvi_instant.defaultHistorical = false; //BOOLEAN
cvi_instant.defaultPreserve = false; //BOOLEAN
cvi_instant.defaultText = ''; //STR
cvi_instant.defaultTextcolor = '#000000'; //STR '#000000'-'#ffffff'
cvi_instant.defaultFontattr = [100,100,100]; //OBJ [1-200==weight, 10-400==width, 10-1000==space]

Add images using Javascript

cvi_instant.add(image, options);
image should be an image element: document.getElementById("myimg")
options can contain one or more values: {tilt: value, shadow: value, shade: value, color: value, noshade: value, nocorner: value, historical: value, preserve: value, text: value, textcolor: value, fontattr: [value,value,value] }

Example:

cvi_instant.add(document.getElementById("myimg"), { shadow: 75, shade: 10 });

Modify images using Javascript

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

Example:

cvi_instant.modify(document.getElementById("myimg"), { tilt: "left" });

Remove effect from an image using Javascript

cvi_instant.remove(image);

Demonstration

Shows some of the things "instant.js" does.

First image with class = "instant itiltleft icolorFFFCE9 ishadow40 historical", next image with class = "instant nocorner itxtalt" and next two images with class = "instant itxtalt". All other images with class = "instant" only...

Why use Javascript Instant Image?

• Fast and easy to implement. Just add class="instant" to the image and your good to go.
• Don't need to spend time in an image editor creating an Polaroid^™ image effect.
  *Polaroid is a trademark of Polaroid Corporation.
• 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.

History

• IE8 modifications

• Added frayed border support

• Added round corner support

• Added text annotation support

• Changed algorithm for calculating border width

• Added better shading support for Internet Explorer

• Added support to preserve image aspect ratio

• Added scriptable lib version cvi_instant_lib.js

• Added soft shadow support for IE
• Added noshading class

• Added support for img attributes:
  id alt title src onclick

• IE bug fixing

• Changed minimum dimension to 64x64

• Added support for Internet Explorer 6/7

• Initial Release

Credits

The inspiration for the script came from polaroid.rb.

License

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