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

Images used are copyrighted and are used for demonstration only.

Download instant.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="instant.js"></script>

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

• 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"

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
If cvi_text_lib.js is loaded also...
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]
If cvi_filter_lib.js is loaded also...
cvi_instant.defaultFilter = null; //OBJ [{f='grayscale'},{f='emboss', s:1}...]

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], filter: value }

Examples:

cvi_instant.add(document.getElementById("myimg"), { shadow: 75, shade: 10 });
<img onLoad="cvi_instant.add(this, { 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);

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

• cvi_text_lib.js supports text capabilities. [WYSIWYG-Editor]
  Provides multiple master single line stroke text capability for Canvas and VML (identical representation).


• cvi_filter_lib.js supports image filtering capabilities. [WYSIWYG-Editor] [Home-Page]
  Provides image filter capability for Canvas (only if getImageData/setImageData is supported).
  
  filter : [{#1 filter options},{#2 filter options}...];
  options   e.g. {f: 'contrast', s: 1.5 }
  f == STRING filter name e.g. "invert" Default: null (required)

       "anaglyph"1.7 Creates a 3D anaglyph from a single image [no args]
       "invert"1.0 Reverses all colors of the image [no args]
       "invertalpha"1.0 Reverses the transparency of the image [no args]
       "grayscale"1.0 Converts the image into grayscale [no args]
       "solarize"1.0 Solarizes the image by negating the colors [no args]
       "sepia"1.0 Applies the well-known sepia coloring to the image [no args]
       "threshold"1.0 Converts the image to black&white (s<1 == darker and s>1 == brighter)
       "posterize"1.4 Posterizes the image by quantizing each channel to a limited number of levels
       "tritone"1.5 Applies 3 colors for low|mid|high range according to the brightness of the image
       "mixrgb"1.5 Mixes the RGB channels with the other two channels
       "exposure"1.4 Simulates changing the exposure of the image
       "gamma"1.0 Standard gamma correction (s<1 == darker and s>1 == brighter)
       "brightness"1.0 Change brightness (s<1 == darker and s>1 == brighter)
       "contrast"1.0 Change contrast (s<1 == lower and s>1 == higher)
       "adjustrgba"1.0 Adjust the red & green & blue & alpha channel of the image (s == [r,g,b,a])
       "adjusthsba"1.0 Adjust hue & saturation & brightness & alpha channel of the image (s == [h,s,b,a])
       "adjustyuva"1.6 Adjust luminance & blue–yellow chrominance & red–cyan chrominance & alpha channel of the image (s == [y,u,v,a])
       "colorkey"1.6 Set alpha to 0 if pixel color values are higher than min and lower than max rgb color
       "chromakey"1.6 Set alpha to 0 if pixel hue & saturation & brightness matches
       "multiplyalpha"1.0 Multiplies the colors by the alpha values [no args]
       "unmultiplyalpha"1.0 Unmultiplies the alpha values from the colors [no args]
       "alphamask"1.0 Creates an alpha mask of the image  [no args]
       "stackblur"1.0 Blurs the image (result is similar to gaussian bluring)
       "smooth"1.3 Smoothes the image (result is similar to bluring)
       "spinblur"1.2 Blurs by rotating the centered image
       "zoomblur"1.2 Blurs by zooming the centered image
       "motionblur"1.2 Blurs by moving the image to a defined direction
       "tiltshift"1.0 Blurs partly to create the miniature fake effect
       "outline"1.5 Creates grayscaled outline images by different operators (e.g. sobel, prewitt...).
       "convolve"1.0 Use your own 3x3 matrix via option m=[[n,n,n],[n,n,n],[n,n,n]]
       "blur"1.0 Bluring the image by (in build and extendable cvi_matrix object) convolution
       "median"1.0 Smoothes grainy images by (in build and extendable cvi_matrix object) convolution
       "sharpen"1.0 Makes image sharper by (in build and extendable cvi_matrix object) convolution
       "sharper"1.0 Makes image even sharper by (in build and extendable cvi_matrix object) convolution
       "bumplt"1.0 Embosses the image by (in build and extendable cvi_matrix object) convolution
       "bumpbr"1.0 ... 

  s == FLOAT/OBJECT multiplier(s) e.g. 0-255 Defaults to... (optional)

       1         if f=="zoomblur|spinblur" Distance (px)
       1         if f=="stackblur" Radius (1-180) (only if cvi_stackblur.js is loaded)
       1         if f=="smooth" Radius (px 1-8)
       1         if f=="posterize" Number of levels (1-16)
       1         if f=="threshold" Multiplier of 127 (0-2)
       1         if f=="brightness|contrast|gamma|exposure" Multiplier of existing value (0-255)
       [1,0]     if f=="motionblur" Distance (px) and angle (0-360)
       [0.5,0.4, if f=="tiltshift" Unmask position (0.0-1.0) and size (0.0-1.0)
            0,4] and horizontal or vertical orientation (0|1) and blur radius (px 1-8) 
       [auto,0]  if f=="convolve" or m!=null. Divisor of convolution result (-1==auto), 
                 useable for normalization and bias (0-255) for brightness addition
       [1,0,     if f=="outline" Divisor of convolution result, bias (0-255) 
         'name'] and operator ('sobel'|'scharr'|'prewitt'|'kirsh'|'roberts') 
       [1,1,1,1] if f=="adjustrgba" red, green, blue, alpha. Multipliers of existing values (0-255)
       [1,1,1,1] if f=="adjusthsba" hue, saturation, brightness, alpha. Multiply existing values (0-255)
       [1,1,1,1] if f=="adjustyuva" luminance, blue–yellow chrominance, red–cyan chrominance, alpha. Multiply existing values (0-255)
       [0,0,0,0,0]  f=="chromakey" hue (0-360) and hue tolerance, min saturation, min brightness, max brightness (0-100)
       [[0,0,0], if f=="colorkey" equals rgb min and rgb max triplet (0-255)
        [0,0,0]] 
       [[1,1,1], if f=="mixrgb" Mix into r, g, b with...
        [1,1,1]] ...bluegreen, redblue, greenred as triplets [0-255,0-255,0-255]
       [[0,0,0], if f=="tritone" low|mid|high range colors as...
        [0,0,0], ...rgb triplets [0-255,0-255,0-255]
        [0,0,0]] 

  m == OBJECT kernel matrix e.g. [[n,n,n],[n,n,n],[n,n,n]] Default: null (optional)
  

  
  

• cvi_istack_lib.js supports image stack capabilities. [Example-Demo]
  Provides fading image stacks for Images and CVI Effects.

  Set defaults

  cvi_istack.defaultImagearray = null; //OBJ e.g. [{source:'image.jpg'}]
cvi_istack.defaultMainwidth  = 128; //INT 80-n (px width)
cvi_istack.defaultMainheight = 128; //INT 80-n (px height)
cvi_istack.defaultPlayframes = 20; //INT 1-100 equals frames to fade (* 30 milliseconds)
cvi_istack.defaultPlaydelay  = 5000; //INT 1000-n equals milliseconds (1/1000)
cvi_istack.defaultLoadtimeout= 3000; //INT 1000-n equals milliseconds (1/1000)
cvi_istack.defaultNoiefade   = false;//BOOLEAN IE's Alpha filter produces rough edges
cvi_istack.defaultPlayscript = ''; //STRING e.g. 'cvi_bevel'|'cvi_corner'|'cvi_curl'|'cvi_edge'|'cvi_glossy'|
'cvi_instant'|'cvi_reflex'|'cvi_slide'|'cvi_sphere'|'cvi_strip'
  

  imagearray supports source (required) and options (optional).

  Add stack

  cvi_istack.add(element, options);
  

  element  == div element

  options  e.g. {mainwidth: 128, mainheight: 128, ...}

  imagearray == OBJ Default: null
mainwidth  == INT 32 - n Default: 128
mainheight == INT 32 - n Default: 128
playframes == INT 1 - 100 Default: 20
playdelay  == INT 1000 - n Default: 5000
loadtimeout== INT 1000 - n Default: 3000
noiefade   == BOL true or false Default: false
playscript == STR Default: ''
  

  Advices: All images should have the same aspect ratio like the stack object.
  cvi_slide and cvi_strip creates generally 1:1 objects (using the larger dimension),
  cvi_sphere creates generally 1:1 objects (using the smaller dimension) and
  cvi_reflex creates objects with additional height (for the reflection).
  Hint: By adding a stack to a div element, the former content of the element will be overwritten.

  Get some informations

  FLOAT  = cvi_istack.version;
STRING = cvi_istack.released;

  Play stack

  cvi_istack.play(element);

  Pause stack

  cvi_istack.pause(element);

  Remove stack

  cvi_istack.remove(element);

  Example

  <script type="text/javascript">
  <!--
  	var photos = new Array();
  	photos = [
  		{source:'images/fire.jpg', options:'{tilt:"l",text:"fire"}' },
  		{source:'images/jeans.jpg', options:'{tilt:"r",text:"jeans"}' },
  		{source:'images/rose.jpg', options:'{tilt:"l",text:"rose"}' },
  		{source:'images/swirl.jpg', options:'{tilt:"r",text:"swirl"}' },
  		{source:'images/fruits.jpg', options:'{tilt:"l",text:"fruits"}' },
  		{source:'images/heart.jpg' }
  	];
  	
  	function init_ImageStack() {
  		cvi_instant.defaultPreserve=true;
  		cvi_instant.defaultTilt='left';
  		cvi_instant.defaultFontattr= [100,100,100];
  		cvi_istack.add(document.getElementById('wrapper_div'),{
  			imagearray: photos,
  			mainwidth: 200,
  			mainheight: 200,
  			playdelay: 3000,
  			playscript: 'cvi_instant',
  			noiefade: true
  		});
  	}
  	
  	if(window.attachEvent) {
  		window.attachEvent("onload", init_ImageStack);
  	}else {
  		window.addEventListener("load", init_ImageStack, false);
  	}
  -->
  </script>
    		

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

Please read the license before you download instant.js 2.4

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

Version 2.4

• Added support for Internet Explorer 9

• Extended distribution. Added the support libs "cvi_filter_lib.js" and "cvi_istack_lib.js"

• 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

The inspiration for the script came from polaroid.rb.

Please leave any comments at this contact formular.

instant.js and cvi_instant_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.

•   home  
•   developer  
•   laboratory  
•   mapzoom.js
  Supports zoom & pan for pixel & vector data! It's a conceptual combination of ShiftZoom and Mapper. Requires no plugin/extension or any other external resource!
•   shiftzoom.js
  Supports zoom & pan functionality! The library allows you to add/remove zoom and pan functionality to oversized images on your webpages. Requires no plugin/extension or any other external resource!
•   snapfit.js
  Supports jigsaw puzzle functionality! The script allows you to add jigsaw puzzles with individual options to images on your webpages. Requires no plugin/extension or any other external resource!
•   booklet.js
  Simulates an authentic looking album or book presenting photos, images and pictures of all sizes and with any aspect ratio. Includes covering, navigation, information, linking and auto generated visual table of contents. Requires no plugin/extension or any other external resource!
•   tripleb.js
  Simulates the CSS 3 beautifying features border-radius, box-shadow and background-gradient on your webpages. Requires no plugin/extension or any other external resource!
•   loupe.js
  Simulates an authentic looking magnifying glass! The script allows you to add a loupe for magnifying (inc. start viewpoint) to an image on your webpage. Requires no plugin/extension but one external resource image!
•   busy.js
  Supports native spinner animations! The library allows you to add/remove loading indicators to the viewport and to block-level elements on your webpages. Requires no plugin/extension or any other external resource!
•   mapper.js
  Emulates native area highlighting! The script allows you to add automatic area highlighting to image maps on your webpages (inc. export to SVG). Requires no plugin/extension or any other external resource!
•   glossy.js
  Simulates a glossy shaded and beveled button look! The script allows you to add individual corners, shadings and shadows to images on your webpages. Requires no plugin/extension or any other external resource!
•   slided.js
  Simulates a slide frame look including gradients! The script allows you to add individual colors, shadings and shadows to images on your webpages. Requires no plugin/extension or any other external resource!
•   corner.js
  Simulates a whole bunch of image effects! The script allows you to add individual corners, shadings and shadows to images on your webpages. Requires no plugin/extension or any other external resource!
•   transm.js
  Supports programmable image transitions! Features 113 transitions, 32 tweenings, individual corners, overlay graphics and event actions. Requires no plugin/extension or any other external resource!
•   gauge.js
  Supports programmable gauges! The script allows you to add gauges (with shading and reflection) to your webpages. Requires no plugin/extension or any other external resource!
•   filmed.js
  Simulates a film strip look including reflection! The script allows you to add individual colors, shining and shadows to images on your webpages. Requires no plugin/extension or any other external resource!
•   edge.js
  Simulates masked image edges! The script allows you to add individual masks (inc. inbuilt mask) to images on your webpages. Requires no plugin/extension but zero or more external mask images!
•   sphere.js
  Simulates a spherical image effect! The script allows you to add an spherical picture effect with individual zooming, shading, shining, transparency and colors to images on your webpages. Requires no plugin/extension or any other external resource!
•   bevel.js
  Simulates a whole bunch of image effects! The script allows you to add bevels with individual glowing, shading and shining to images on your webpages. Requires no plugin/extension or any other external resource!
•   curl.js
  Simulates a page curl image effect! The script allows you to add curls with individual paperback color, shadow opacity and size to images on your webpages. Requires no plugin/extension or any other external resource!
•   reflex.js
  Simulates a Cover Flow^™ image effect! The script allows you to add individual borders, tiltings and reflections to images on your webpages. Requires no plugin/extension or any other external resource! *Cover Flow is a trademark of Apple Inc.