HTML 5

jQuery Shining Image

General :

jQuery Shining Image is an HTML5 jQuery plugin that add an animated shining effect to your images.

This plugin use canvas element, and is compatible with all computer and mobiles modern browsers. For the others, the image keeps its default static look.

Options :

This is the plugin parameters list :

You can change them after initialisation like this : $('#yourImg').data('shiningImage').settings.color = '#78DAF5';

Methods :

You can interact with the plugin :

Example: $('#yourImg').data('shiningImage').stopshine();

Demos :

Default :

Demo

HTML Code :

‹img id="demo1" src="demoAssets/img/demo1.png" alt="Demo"/›

JS Code :

$('#demo1').shiningImage();

With Fancybox:

Demo

HTML Code :

‹a id="demo2" href="demoAssets/img/demoFancy.jpg"›
	‹img src="demoAssets/img/min_demoFancy.jpg" alt="Demo" /›
‹/a›

JS Code :

$('#demo2').fancybox({
	'overlayShow'	: false,
	'transitionIn'	: 'elastic',
	'transitionOut'	: 'elastic',
	onComplete: function()
	{
		$('#fancybox-img').shiningImage({
			opacity: 0.2
		});
	},
	onCleanup: function()
	 {
		$('#fancybox-img').show();
		$('#fancybox-img_canvas').hide();
	}					
});
                            

Custom options, mouseOver and mouseOut events :

Demo

HTML Code :

‹img id="demo3" src="demoAssets/img/demo3.png" alt="Demo" 
onmouseover="$('#demo3').data('shiningImage').shine();" 
onmouseout="$('#demo3').data('shiningImage').stopshine();" /›

JS Code :

$('#demo3').shiningImage({
	direction : 'y',
	color : '#75FFA5',
	opacity : 0.25,
	playOnLoad: false,
	scale : 0.7,
	speed : 100,
	delay : 3000
});
                            

Using onLoopComplete event to change color and direction :

Demo

HTML Code :

‹img id="demo4" src="demoAssets/img/demoBtn.png" alt="Demo"/›

JS Code :

var colorsArray = new Array('#75FF85','#FFED75',
                              '#FF7E75','#02AADB');
var colorInd = 0;
var directionArray = new Array('x','y','z');
var directionInd = 0;

$('#demo4').shiningImage({
    color: '#75FF85',
    onLoopComplete: function()
    {
        colorInd++;
        if (colorInd == colorsArray.length) {colorInd = 0;}
        directionInd++;
        if (directionInd == directionArray.length) {
            directionInd = 0;
        }

        $('#demo4').data('shiningImage').settings.color 
            = colorsArray[colorInd];
        $('#demo4').data('shiningImage').settings.direction 
            = directionArray[directionInd];
    },
    opacity : 0.2
});