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">

Solution 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>

Solution 2

Make sure you are running a current version of jquery. include this in the head section

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
</script>

check console log for error if you are on chrome right click, inspect element, console, errors.

the code looks good to me and works as well.

Comments

[Ivan P - Digital Alchemist]

the console in Chrome is saying "Uncaught reference error: $ is not defined"

[Ivan P - Digital Alchemist]

I included the jQuery library as you suggested but still nothing.