glossy.js

Glossy.js 1.8 allows you to add corners and shading and shadow to images on your webpages (alternatively: corner.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 "glossy.js" does.
    6 images with class = "glossy iradius50"

"cvi_glossy_lib.js" supports additional appearances.

    Empty gif with class = "glossy ibgcolor00aa00 igradient00aaaa horizontal noshadow"

    3 images with class = "glossy"

beautiful landscape

Setting Up

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

<script type="text/javascript" src="glossy.js"></script>

Using It

To make it glossy just add a class="glossy" to the image (minimum dimension: 16x16).

Classes

Scripting lib

If you want flexibility, use "cvi_glossy_lib.js" instead of "glossy.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_glossy.defaultRadius = 25; //INT 20-50 (%)
cvi_glossy.defaultColor = 0; //STR '#000000'-'#ffffff' or 0
cvi_glossy.defaultColor2 = 0; //STR '#000000'-'#ffffff' or 0
cvi_glossy.defaultGradient = 'v'; //STR 'd|h|v'-'diagonally|horizontal|vertical'
cvi_glossy.defaultAngle = 0; //INT -100 to +100 (% angle)
cvi_glossy.defaultShade = 50; //INT 0-100 (% opacity)
cvi_glossy.defaultShadow = 40; //INT 0-100 (% opacity)
cvi_glossy.defaultNoshadow = false; //BOOLEAN
cvi_glossy.defaultNoradius = false; //BOOLEAN
cvi_glossy.defaultNogradient = false; //BOOLEAN
 If cvi_filter_lib.js is loaded also...
cvi_glossy.defaultFilter = null; //OBJ [{f='grayscale'},{f='emboss', s:1}...]

Add images using Javascript
cvi_glossy.add(image, options);
image should be an image element: document.getElementById("myimg")
options can contain one or more values: {radius: value, shadow: value, shade: value, angle: value, color: value, color2: value, gradient: value, noshadow: value, noradius: value, nogradient: value, filter: value}
Examples:
cvi_glossy.add(document.getElementById("myimg"), { shadow: 75, shade: 20 });
<img onLoad="cvi_glossy.add(this, { shadow: 75, shade: 20 });" ...>

Modify images using Javascript
cvi_glossy.modify(image, options);
If the image has already an effect but a option value has changed, the effect will be changed accordingly.
Example:
cvi_glossy.modify(document.getElementById("myimg"), { radius: 24 });

Remove effect from an image using Javascript
cvi_glossy.remove(image);

Support libs

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

Why use Javascript Image Glossy?

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

Restrictions

Opera do not support printing of canvas.

History

Version 1.8 Version 1.7 Version 1.6 Version 1.5 Version 1.4 Version 1.3 Version 1.2 Version 1.1 Version 1.0

License

glossy.js, and cvi_glossy_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