Salve a tutti stavo cercando di testare questo plugin:

http://vegas.jaysalvat.com/documentation/slideshow/

il problema è che funziona tutto ma non riesco a fargli visualizzare gli overlays sugli sfondi..
potete dargli un occhiata e dirmi dove sbaglio?

Premetto che la mia pagina si chiama index.html e nella stessa root ho inserito il file "jquery-1.7.2.js", i background.jpg la cartella "vegas" con al suo interno i file "jquery.vegas.css", "jquery.vegas.js" e le cartelle images e overlays di vegas..

questo è l'html della mia pagina:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page</title>

<META NAME="DESCRIPTION" CONTENT="**************************">

<META NAME="KEYWORDS" CONTENT="************************">

<META NAME="ROBOTS" CONTENT="INDEX,FOLLOW">

<META NAME="GOOGLEBOT" CONTENT="NOARCHIVE">

<meta name="google" content="notranslate" />

<meta name="google-site-verification" content="MqqoF9J20HY5si62NtbpDsmijtt9EPARkRtTHnHVr K4" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<script src="jquery-1.7.2.js"></script>

<script type="text/javascript" src="vegas/jquery.vegas.js"></script>

<link rel="stylesheet" type="text/css" href="vegas/jquery.vegas.css">



<script type="text/javascript">

$.vegas('slideshow', {
delay:5000,
backgrounds:[
{ src:'background.jpg', fade:500 },
{ src:'background2.jpg', fade:500 },
{ src:'background3.jpg', fade:500 }
]
})('overlay', {
src:'vegas/overlays/01.png'
});

</script>


</head>
<body>


</body>
</html>


Mi aiutate a capire come risolvere il problema?