CVI
sphere.js 1.3 allows you to add a spherical picture effect to images on your webpages (alternatively: slided.js or filmed.js).

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

onmousemove


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


ishift1

ishift25

ishift50

ishift75

onmousemove


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


ialpha1
ishine75
ishade50

ialpha10
isize128

isize96

64

48

32
prev
play
pause
next


Images used are copyrighted and are used for demonstration only.

Setting Up

Download sphere.js and include it into your webpage.

<script type="text/javascript" src="cvi_sphere_lib.js"></script>
// this one only if you need microformat support (faked classnames)...
<script type="text/javascript" src="sphere.js"></script>

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

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", you'll get access to additional features by the following support libraries (part of distribution):

Why use Javascript Sphere Image?

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

Download

Please read the license before you download sphere.js 1.3

F.A.Q.

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

History

Version 1.3

Version 1.2 Version 1.11 Version 1.1 Version 1.0

Contact

Please leave any comments at this contact formular.

License

sphere.js and cvi_sphere_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.

Other Projects

sphere.netzgesta.de © 2014 by Christian Effenberger feed   twitter   facebook   myspace   delicious   digg   reddit   magnoliacom   newsvine   furl   google   yahoo   blinklist   mister-wong