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

Setting Up

Download instant.js and include it into your webpage.

Using It

To make it glossy just add a class="instant" to the image (minimum dimension: 80x80).

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

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.

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

Comments

Please leave any comments at this contact formular.

Download

Download instant.js 1.1

Internet Explorer

IE do not support the canvas tag at all, but through VML a canvas emulation in Internet Explorer is done.

Opera

Opera do not support printing of canvas.

History

• Added support for Internet Explorer 6/7

• Initial Release

Credits

The inspiration for the script came from polaroid.rb.

License

Instant.js 1.1 is distributed under this LICENSE. License permits free of charge use on non-commercial and private web sites only.

Images used are copyrighted and are used for demonstration only.

www.netzgesta.de  also visit  S5 Reloaded • AJAX-FilmDB • Corner.js • Glossy.js • Loupe.js