SetTimeout function on a photoslide

Question

I'm creating a website on one page like a photoslide, here is my code and function on jsFiddle

There are two things I need help on.

1. SetTimeout on the second page, so if nobody clicks any buttons/a links for 5 seconds, it goes back to the first page automatically without any buttons/links being clicked.

2. On the third page, there is a 'thank you' a tag at the moment, I would like to remove that a tag entirely, so it is going to be an image on the page only. After 3 seconds it should goes back to the first page automatically.

How can I setTimeout on those two pages to be able to achieve the two functions above? Any help is appreciated.

Answer 1

If you add this code to the beginning of the a.panel click event handler your timeouts will be in-effect:

//cache all the `a.panel` elements and setup a timer for our `setTimeout`s
var $panels = $('a.panel'),
    timer   = null;

//add click event handlers to all the `a.panel` links
$panels.click(function () {


    //clear our timer so we don't get redirected back to `#item1` after clicking a link in a timely manor
    clearTimeout(timer);
    timer = null;

    //cache the value of `$(this)` since we will use it more than once
    var $this = $(this);

    //check if we just clicked the link to the second page
    if ($this.attr('href') == '#item2') {

        //set a timer to return to the first page after five seconds of inactivity
        timer = setTimeout(function () {
            $panels.filter('[href="#item1"]').trigger('click');
        }, 5000);

    //check if we just clicked the link to the third page
    } else if ($this.attr('href') == '#item3') {

        //set a timer to return to the first page after three seconds of inactivity
        timer = setTimeout(function () {
            $panels.filter('[href="#item1"]').trigger('click');
        }, 3000);
    }

Here is a demo: http://jsfiddle.net/jasper/EXfnN/28/