Instant.js 1.5 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"
• preserve the image aspect ratio by adding preserve:
  Image aspectratio class "preserve"

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.defaultPreserve = false; //BOOLEAN

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, preserve: 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 icolor000000 ishadow50" 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

• Added support to presere 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. There are also Commercial Software Licenses available.

Images used are copyrighted and are used for demonstration only.

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