How to use
  1. Include all necessary javascript files:

    2. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
    <script type="text/javascript" src="jquery.illuminate.0.7.min.js"></script>

  2. Create Your CSS/HTML object

    3. <div id="button" style="background:#98cb00">Click Me</div>

  3. Illuminate the CSS/HTML object

    4. <script type="text/javascript">
    $(document).ready(function(){
    $('#button').illuminate();
    });
    </script>

 

Options

jQuery illuminate has several options which allow you to customize the illumination effect. The options are shown below:

Key
Default Value
Description
intensity
0.05
Intensity of the illumination 0.00% – 1.00%
color
(blank)
illuminate color (default is background color)
blink
true
illumination will pulse/blink on and off
blinkSpeed
600
# of millisectionds to pulse/blink on and off
outerGlow
true
true or false whether to add an outer glow effect
outerGlowSize
30px
the size of the outerGlow illuminate
outerGlowColor
(blank)
outer glow color (default is background color)

To add any or all of these options, the code would look as follows:

<script type="text/javascript">
$(document).ready(function(){
$('#button').illuminate({
'intensity': '0.3',
'color': '#98cb00',
'blink': 'true',
'blinkSpeed': '1200',
'outerGlow': 'true',
'outerGlowSize': '30px',
'outerGlowColor': '#98cb00'
});
});
</script>

 

Tips
  • If the element that you are trying to apply the illumination effect on is not working, make sure that the CSS background color is set.
  • If you are having problems getting the plug-in to work. Make sure you have all the necesarry javascript plug-ins added. You will need to link to the latest jQuery file and the jQuery UI file along with the illuminate file.

 

Video tutorial

Here is a quick video tutorial, showing how to implement this plug-in.

You can download the sample files from the video here: Download

 

Conclusion

The jQuery illuminate plug-in can be freely used or modified. If you would like to share your updates and contribute to the plug-in, please feel free to

Send Me a Message.

Additionally, feel free to post a comment below.
Thanks ;)