Sphere.js 1.3 allows you to add a spherical picture effect 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.

Demonstration

Shows some of the things "sphere.js" does.
     5 images with class = "sphere icolor0000ff igradient00ffff" and different image opacity.

ialpha100

ialpha75

ialpha50

ialpha25

ialpha1

5 images with class = "sphere" and different image zoom.

izoom100

izoom125

izoom150

izoom175

izoom200

5 images with class = "sphere" and different image shift.

ishift1

ishift25

ishift50

ishift75

ishift100

5 images with class = "sphere" and different image sizes and 4 interactive and transparent GIF's.

ialpha1
ishine75
ishade50

ialpha10
isize128

isize96

64

48

32

Setting Up

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

Using It

To get the spherical picture effect just add a class="sphere" to the image (minimum dimension: 32x32).
sphere.js works as a wrapper to translate the microformat classnames to arguments for cvi_sphere_lib.js !

Classes

• Initialisation class "sphere"
• define the sphere size by adding isize followed by the desired size in pixel:
  Sphere size class "isize" - min=32 max=n default=auto
• vary the image by adding izoom followed by the desired zoom in percent:
  Image zoom class "izoom" - min=100 max=200 default=100
• vary the image by adding ishift followed by the desired shift in percent:
  Image shift class "ishift" - min=1 max=100 default=50
• vary the image by adding ialpha followed by the desired opacity in percent:
  Image opacity class "ialpha" - min=1 max=100 default=100
• vary the shading by adding ishade followed by the desired opacity in percent:
  Shading opacity class "ishade" - min=1 max=100 default=100
• vary the shining by adding ishine followed by the desired opacity in percent:
  Shining opacity class "ishine" - min=1 max=100 default=100
• vary the sphere background by adding icolor followed by the desired color as hex:
  Sphere color class "icolor" - min=000000 max=ffffff default=0
• vary the sphere background by adding igradient followed by the desired color as hex:
  Sphere color class "igradient" - min=000000 max=ffffff default=0

Scripting lib

If you want flexibility, use "cvi_sphere_lib.js" directly, with or without the help of "sphere.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_sphere.defaultSize = 0; //INT 32-n (pixel)
cvi_sphere.defaultZoom = 100; //INT 100-200 (% zoom)
cvi_sphere.defaultShift = 50; //INT 1-100 (% offset)
cvi_sphere.defaultAlpha = 100; //INT 1-100 (% opacity)
cvi_sphere.defaultShade = 100; //INT 1-100 (% opacity)
cvi_sphere.defaultShine = 100; //INT 1-100 (% opacity)
cvi_sphere.defaultColor = 0; //STR '#000000'-'#ffffff'
cvi_sphere.defaultColor2 = 0; //STR '#000000'-'#ffffff'
If cvi_filter_lib.js is loaded also...
cvi_sphere.defaultFilter = null; //OBJ [{f='grayscale'},{f='emboss', s:1}...]

Add images using Javascript

cvi_sphere.add(image, options);
image should be an image element: document.getElementById("myimg")
options can contain one or more values: {size: value, zoom: value, shift: value, alpha: value, shade: value, shine: value, color: value, color2: value, filter: value }

Examples:

cvi_sphere.add(document.getElementById("myimg"), { alpha: 75, shade: 100 });
<img onLoad="cvi_sphere.add(this, {alpha: 75, shade: 100 });" ...>

Modify images using Javascript

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

Example:

cvi_sphere.modify(document.getElementById("myimg"), { zoom: 200 });

Remove effect from an image using Javascript

cvi_sphere.remove(image);

Examples

<img onLoad="cvi_sphere.add(this);" ...>
cvi_sphere.add(document.getElementById('img'));
if(typeof $=='undefined') {function $(v) {return(document.getElementById(v));}}
cvi_sphere.add($('img'));
cvi_sphere.modify($('img'), {zoom:150, color:'#0080ff'});
cvi_sphere.remove($('img'));

Support libs

If you are using the flexible "cvi_sphere_lib.js" without "sphere.js", you'll get access to additional features by the following support libraries (part of distribution):

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

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

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

       1         if f=="zoomblur|spinblur" Distance (px)
       1         if f=="smooth" Radius (px 1-10)
       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)
       [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_glossy'|'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_glossy.defaultPreserve=true;
  		cvi_glossy.defaultTilt='left';
  		cvi_glossy.defaultFontattr= [100,100,100];
  		cvi_istack.add(document.getElementById('wrapper_div'),{
  			imagearray: photos,
  			mainwidth: 200,
  			mainheight: 200,
  			playdelay: 3000,
  			playscript: 'cvi_glossy',
  			noiefade: true
  		});
  	}
  	
  	if(window.attachEvent) {
  		window.attachEvent("onload", init_ImageStack);
  	}else {
  		window.addEventListener("load", init_ImageStack, false);
  	}
  -->
  </script>
    		

Why use Javascript Image Sphere?

• Fast and easy to implement. Just add class="sphere" to the image and your good to go.
• Don't need to spend time in an image editor creating a spherical image effect.
• 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

• Added support for Internet Explorer 9

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

• Added image shift support

• Initial Release

License

Sphere.js and cvi_sphere_lib.js are 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, CVI-dev, S5 Reloaded and AJAX-FilmDB