Uncaught reference error: $ is not defined error

Question

I took this code from a tutorial to make an auto advancing slideshow in javascript/jQuery and it works wonderfully in jsfiddle. However, when I bring everything over into Dreamweaver it seems to just stop working. Everything is there, I've linked all the relevant files (the .js and the .css) as well as the jQuery library. For some reason though it won't work at all. Here's the code.

The HTML

<div class="fadeIn">
            <img src="image1.png" height="500" width="800"/>
            <img src="image2.png" height="500" width="800"/>
            <img src="image3.png" height="500" width="800"/>
            <img src="image4.png" height="500" width="800"/>
        </div>

The CSS

.fadeIn {
    position: relative;
    width: 800px;
    height: 500px;
}

.fadeIn img {
    position: absolute;
    left:0;
    top:0;
}

The Javascript/jQuery

$(function(){
    $('.fadeIn img:gt(0)').hide();
    setInterval(function(){
    $('.fadeIn :first-child').fadeOut()
        .next('img').fadeIn()
        .end().appendTo('.fadeIn');
    }, 3000);
});

Here's the header

<script src="SlideShow.js" type="text/javascript"></script>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>

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

Answer 1

After quick try, I managed to reproduce error you mentioned. If you have external js files with your function, which relly on other JS libraries, you have to load that library first, and then dependent JS file with your functions.

For example, this won't work:

<script src="slideshow.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Because, JS interpreter search for $ before is even loaded and defined.

But, this will work:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="slideshow.js"></script>