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.
- Very easy to use : $('img').shiningImage()
- Many options to customize the effect
- The shining image keeps the default style and class. Canvas ID is original img ID + "_canvas" . (ex : '#myImg_canvas') .
- The shining image keeps original image click, mouseover, mouseout, mouseup and mousedown events
- Compatibility : IE9+ , Firefox 4+ , Google Chrome 11+, Opera 10.6+, Safari 3.2+
Options :
This is the plugin parameters list :
- color : String | Sets the effect color
- delay : Int | Sets the delay between each shine effect
- direction : 'x','y' or 'z' | Sets the effect direction. Horizontal (x), vertical (y) or diagonal (z)
- onComplete : Function | | Execute this function after plugin initialisation
- onLoopComplete : Function | | Execute this function after each loop
- opacity : Int between 0 and 1 | | Sets the effect opacity
- playOnLoad : Boolean | | Automatically start effect or not
- scale : Int between 0 and 1 | Sets the effect scale. 1 = 30% of image width or height
- speed : Int | Sets the effect speed in ms
You can change them after initialisation like this : $('#yourImg').data('shiningImage').settings.color = '#78DAF5';
Methods :
You can interact with the plugin :
- .data('shiningImage').shine() : Start shine effect
- .data('shiningImage').stopshine() : Stop shine effect
Example: $('#yourImg').data('shiningImage').stopshine();
Demos :
Default : |
|
 |
HTML Code : ‹img id="demo1" src="demoAssets/img/demo1.png" alt="Demo"/›
JS Code : $('#demo1').shiningImage();
|
With Fancybox: |
|
 |
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 : |
|
|
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 : |
|
|
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
});
|