Step 1Download and unzip the latest
jQuery shadowOn file.
Step 2Add references to javascript files needed in your html file:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.guid.js"></script>
<script type="text/javascript" src="js/jquery.dotimeout.js"></script>
<script type="text/javascript" src="js/jquery.shadowon.min.js"></script>
Step 3Implementation of shadowOn
<script type="text/javascript">
$(document).ready(function () {
$("#div1").shadowOn();
$("#div2").shadowOn( { imageset: '88' } );
});
</script>
...
<div id="div1" style="width:200px;height:200px;background-color:blue;"></div>
<div id="div2" style="width:200px;height:200px;background-color:green;"></div>
shadowOn settings
$(".shadowon").shadowOn({
imagepath: "images", //Path to the shadowOn image folders
imageset: "4", //Shadow to use, 1 to 88
autoresize: true, //When the browser or the element is resized the shadow will automatically refresh itself
resizetimer: 250 //Timer to check it the resize have happened, set in milliseconds
});