glossify.js
glossify.js is a jQuery plugin that transforms any image into a beautiful and colourful glossy sphere.
glossify.js is a jQuery plugin that transforms any image into a beautiful and colourful glossy sphere.
Using glossify.js couldn't be easier: just include the script and use some special attributes with any image you want to glossify. No need to call any script or initialize anything.
Step 1: include JQuery and glossify.js in your page
<script src="jquery.js"/> <script src="glossify.js"/>
Step 2: every image you want to glossify just include the data-gloss attribute
<image src="html5.png" data-gloss/>
Changing the color is easy: just use the data-glosscolor attribute. If not provided, the default color is black.
<image src="html5.png" data-gloss data-glosscolor="#ff0000" width="75"/>
You can also change the alpha by using the data-glossalpha attribute. If not provided, the default alpha value is 1 (no transparency).
<image src="html5.png" data-gloss data-glosscolor="#ff0000" data-glossalpha="0.5" width="75"/>
glossify.js is also a JQuery plugin which can be called from your code to transform any image. For instance, to glossify the image whoose id is my_image just issue the following JQuery command:
$('#my_image').glossify({color: "#0000ff", alpha: 1})
Images before glossify
After glossify
glossify.js allows developers to create fantastic looking images across all modern desktop and mobile browsers. glossify.js uses HTML5 Canvas which is compatible with the latest Android and Apple iOS (iPhone/iPad) phones and tablets.
glossify.js is a jQuery plugin.
List of supported browsers:glossify.js is safe to use with older browsers. If glossify.js is not supported by the browser then the original image will be displayed as fallback and your site will continue to work. No javascript errors will be thrown.