javascript problems in a sideshow
<p>I am trying to build my own web site because I don't wanna use joomla or wordpress, but I am terrible at js, so i decided to use a slideshow i found on the web. This slideshow uses jquery and css3. I modified the demo and it was working, then, I put the HTML code inside my PHP file, the scripts and stylesheets in their own folders, and the slideshow stopped working and i got this error: <strong>Uncaught TypeError: Object [object Object] has no method 'sequence'.</strong> </p>

<p>I need help because I really like this slideshow and I would really like to use it in my website.</p>

<pre><code>$(document).ready(function(){
var options = {
    nextButton: true,
    prevButton: true,
    animateStartingFrameIn: true,
    autoPlayDelay: 3000,
    preloader: true,
    pauseOnHover: false,
    /* preloadTheseFrames: [1],
    preloadTheseImages: [
        "images/tn-model1.png",
        "images/tn-model2.png",
        "images/tn-model3.png"
    ] */
};

var sequence = $("#sequence").sequence(options).data("sequence");

sequence.afterLoaded = function() {
    $("#sequence-theme").fadeIn(100);
    $("#sequence-theme li:nth-child("+(sequence.settings.startingFrameID)+") img").addClass("active");
}

sequence.beforeNextFrameAnimatesIn = function() {
    $("#sequence-theme  li:not(:nth-child("+(sequence.nextFrameID)+")) img").removeClass("active");
    $("#sequence-theme  li:nth-child("+(sequence.nextFrameID)+") img").addClass("active");
}

$("#sequence-theme").on("click", ".nav li", function() {
    $(this).children("img").removeClass("active").children("img").addClass("active");
    sequence.nextFrameID = $(this).index()+1;
    sequence.goTo(sequence.nextFrameID);
});
});
</code></pre>

<p>This is the code that gives me an error..</p>

<p>This is the html</p>

<pre><code>&lt;html&gt;
        &lt;head&gt;
          &lt;link rel='icon' href='./favicon/favicon.gif' type='image/gif' /&gt;
          &lt;meta charset='utf-8' /&gt;
            &lt;meta http-equiv='X-UA-Compatible' content='IE=edge, chrome=1' /&gt;
            &lt;meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'&gt;
            &lt;link rel='stylesheet' media='screen' href='./layout/wrstyles/sequencejs-theme.modern-slide-in.css' /&gt;
            &lt;!--[if gte IE9]&gt;
                    &lt;link rel='stylesheet' type='text/css' href='./layout/wrstyles/ie_style.css' /&gt;
                   &lt;![endif]--&gt;
           &lt;script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'&gt;&lt;/script&gt;
           &lt;script src='./layout/wrscripts/sequence.jquery.js'&gt;&lt;/script&gt;
           &lt;script src='./layout/wrscripts/sequencejs-options.modern-slide-in.js'&gt;&lt;/script&gt;";

&lt;script type='text/javascript' src='FCKeditor/fckeditor.js'&gt;&lt;/script&gt;
                            &lt;link rel='stylesheet' type='text/css' media='all' href='./layout/wrstyles/style.css'/&gt;
            &lt;script type='text/javascript' src='./layout/wrscripts/jquery.wsb.iepngfix.min.js'&gt;&lt;/script&gt;
            &lt;script type='text/javascript' src='./layout/wrscripts/superfish.js'&gt;&lt;/script&gt;

    &lt;/head&gt;

        &lt;body&gt;
        &lt;font face='Verdana'&gt;
        &lt;center&gt;
                    &lt;table border='0' cellpadding='0' cellspacing='0' width='$w'&gt;

 echo"&lt;TR&gt;&lt;TD&gt;";
    echo"    &lt;div id='sequence-theme'&gt;
        &lt;div id='sequence' title ='dummy'&gt;
            &lt;img src='./layout/images/logo.png' alt='Previous Frame' /&gt;
            &lt;img src='./layout/images/titolo.png' alt='titolo' /&gt;
            &lt;!-- &lt;img class='next' src='images/logodx.png' alt='Previous Frame' /&gt; --&gt;

            &lt;ul&gt;
                            &lt;li class='animate-in'&gt;
                    &lt;!-- &lt;h2 class='title'&gt;Built using Sequence.js&lt;/h2&gt;
                    &lt;h3 class='subtitle'&gt;The Responsive Slider with Advanced CSS3 Transitions&lt;/h3&gt; --&gt;
                    &lt;img class='model' src='./layout/images/1.png' alt='Model 1' /&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;!-- &lt;h2 class='title'&gt;Creative Control&lt;/h2&gt;
                    &lt;h3 class='subtitle'&gt;Create unique sliders using CSS3 transitions&lt;/h3&gt; --&gt;
                    &lt;img class='model' src='./layout/images/2.png' alt='Model 2' /&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;!-- &lt;h2 class='title'&gt;Cutting Edge&lt;/h2&gt;
                    &lt;h3 class='subtitle'&gt;Supports modern browsers, old browsers (IE7+), touch devices and responsive designs&lt;/h3&gt; --&gt;
                    &lt;img class='model' src='./layout/images/3.png' alt='Model 3' /&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;!--    &lt;ul class='nav'&gt;
            &lt;li&gt;&lt;img src='images/tn-model1.png' alt='Model 1' /&gt;&lt;/li&gt;
            &lt;li&gt;&lt;img src='images/tn-model2.png' alt='Model 2' /&gt;&lt;/li&gt;
            &lt;li&gt;&lt;img src='images/tn-model3.png' alt='Model 3' /&gt;&lt;/li&gt;
        &lt;/ul&gt; --&gt;
    &lt;/div&gt;";
    echo"&lt;br&gt;
         &lt;br&gt;
         &lt;br&gt;&lt;font color='darkred'&gt;&lt;/font&gt;";
    echo"&lt;/TD&gt;&lt;/TR&gt;";
</code></pre>
