Jquery image fade with sequential sources

Question

I made a rough script to change an image with fadein fade out, I want to change it every 5 seconds while taking the new one from a pool of images. In this case I have 4 jpegs with sequential names: dish1 dish2 dish3 dish4 but it results in a pageload and no changes on the image:

$(document).ready(function(){    
  function chngImg(curImg=1,imgNum=4){
    var src = "immagini/dishes_pizze/dish" + curImg + ".jpg";
    $('#picture').fadeOut("slow");
    $('#picture').attr('src', src);
    $('#picture').fadeIn("slow");
    curImg++;
    if (curImg>imgNum){
      curImg=1;
    } //end if
    setTimeout('chngImg(curImg, imgNum);', 5000);
  } // end chngimg
}); //endready

Any help would be useful, I'm new with jQuery.

Answer 1

The problem is when you pass function name in setTimeout function, the function must be public but in your code, the function chngImg is declared inside $(document).ready. It's local function, that's why your code doesnt run. And you cant set default value of arguments.

Your code should be

function chngImg(curImg, imgNum) {
    if (!curImg) {
        curImg = 1;
    }

    if (!imgNum) {
        imgNum = 4;
    }

    var src = "immagini/dishes_pizze/dish" + curImg + ".jpg";
    $('#picture').fadeOut("slow");
    $('#picture').attr('src', src);
    $('#picture').fadeIn("slow");
    curImg++;
    if (curImg > imgNum) {
        curImg = 1;
    } //end if
    setTimeout('chngImg(curImg, imgNum);', 5000);
}

$(document).ready(function() {
    chngImg();
});

Or you can pass callback to setTimeout like that:

$(document).ready(function() {
    function chngImg(curImg, imgNum) {
        if (!curImg) {
            curImg = 1;
        }

        if (!imgNum) {
            imgNum = 4;
        }

        var src = "immagini/dishes_pizze/dish" + curImg + ".jpg";
        $('#picture').fadeOut("slow");
        $('#picture').attr('src', src);
        $('#picture').fadeIn("slow");
        curImg++;
        if (curImg > imgNum) {
            curImg = 1;
        } //end if

        setTimeout(function() {
            chngImg(curImg, imgNum);
        }, 5000);
    }

    chngImg();
});

Answer 2

Try this:

setTimeout(function() { chngImg(curImg, imgNum) }, 5000);

Answer 3

There are multiple problems in your script, try

$(document).ready(function () {
    var curImg = 1,
        imgNum = 4;

    //method signature does not allow default values
    function chngImg() {
        var src = "immagini/dishes_pizze/dish" + curImg + ".jpg";
        //change source after the image is hidden
        $('#picture').fadeOut("slow", function () {
            $(this).attr('src', src).fadeIn("slow", function () {
                //again schdule next iteration using setTimeout()
                setTimeout(chngImg, 5000)
            });
        });
        curImg++;
        if (curImg > imgNum) {
            curImg = 1;
        } //end if 
    } // end chngimg 
    //initialize the loop
    chngImg();
}); //endready

Answer 4

Live Demo

A better way is to use setInterval(func, delay), that will call your function every delay miliseconds.
In the curImg variable we store the actual number of the image globally, then we call the chngImg() function with setInterval() that will execute it every 5 seconds. The chngImg() function is identical with yours.

$(document).ready(function () {    
    var curImg = 1;
    setInterval(function chngImg(imgNum) {
        var src = "immagini/dishes_pizze/dish" + curImg + ".jpg";
        $('#picture').fadeOut("slow");
        $('#picture').attr('src', src);
        $('#picture').fadeIn("slow");
        ++curImg;
        if (curImg > imgNum) {
            curImg = 1;
        }
    }, 5000);
});