Question

I have a gallery that doesnt work properly with setTimeout.
I need to make the gallery change a photo every few sec. but if I press on the indicator, then I want it to change it manually.

this is my js file :

var arrayPic = ["/img/gallery/gal1.jpg", 
                "/img/gallery/gal2.jpg", 
                "/img/gallery/gal3.jpg", 
                "/img/gallery/gal4.jpg", 
                "/img/gallery/gal5.jpg", 
                "/img/gallery/gal6.jpg"];
var counter = 0;
var waitTime = 5000;
var transitionTime = 500;
var t;
var time_is_on = 0;

$(document).ready(function () {


    t = setTimeout(function() {

        changeThisPhoto();
        changeIndicator();

    }, 1000);

    $(".countrydd").ykDropdown();
    $(".subjectdd").ykDropdown();

});


function stopTime() {

    clearTimeout(t);
    time_is_on = 0;
}


function changeDefaultIndicator() {

    console.log($("li.active"));
    var thisChild = ($("li.active").index(this)) + 1;

    for (var i = 0; i < arrayPic.length; i++) {
        $("#indi" + i).removeClass();
    }

    $("#indi" + thisChild).addClass("active");



}

function changeIndicator() {

    $(".indicatorslist li").bind("click", function () {

        var thisChild = ($(".indicatorslist li").index(this)) + 1;

        for (var i = 0; i < arrayPic.length; i++) {
            $("#indi" + i).removeClass();
        }

        $("#indi" + thisChild).addClass("active");

        changeThisPhoto(thisChild);

    })

 }


function animatePhotoOut() {

    $(".backgroundImage").animate({

        opacity: 1

    }, transitionTime, function () {
        $(".backgroundImage").delay(waitTime);
        changeThisPhoto();

    })

}

function changeThisPhoto(child) {

    var stepper = 0;

    if (!child) {
        child = -1;
    }


    $(".backgroundImage").stop().animate({
        opacity: 0
    }, transitionTime, function () {


        if (counter == 5) {
            counter = 0;
        } else {
            counter++;
        }

        if (child = -1) {
            stepper = counter;
        }
        else {
            stepper = child;
        }

        $(".backgroundImage").css("background-image", 
                                  "url('" + arrayPic[stepper] + "')");

        changeDefaultIndicator();
        animatePhotoOut();
    })
}

it works beautifully when I click the indicator, but won’t work with the setTimeout() function… probably…

Answer 1

The setTimeout will only run the change once. Use setInterval instead.