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

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

• javascript
• jquery
• html
• css
• slideshow

• Any errors in the console? – isherwood Commented Oct 18, 2013 at 18:04
• please include the head of your Html it must be a source error – DaniP Commented Oct 18, 2013 at 18:07
• You can't call $ before is even defined in local scope. See answer. – Alan Kis Commented Oct 18, 2013 at 18:50

3 Answers 3

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>

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.

hmmm You need to make sure everything is loaded first to do that you can do

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

}

This means that after the dom finished loading all the scripts, its the time that it will execute your function.