Question

I need to redirect a page when an image slider reaches the last image (ideally after a set time).

I have the code below sort of working but it redirects as soon as the second image is shown. Can anyone help please?

if ($('#mainContent ul.introScreen li img.active:last').css('display', 'block')) {
    window.location.href = "/ibp/app.php";
} else {
    //Do nothing
}

Thanks folks.

EDIT: I think I have an issue with my code somewhere, it seems to be cycling through just the first image. My code is below. Any idea?

function slideSwitch() {
    var $active = $('#introScreen li img.active');
    if ($active.length == 0)
        $active = $('#introScreen li img:last');
    var $next = $active.next().length ? $active.next() : $('#introScreen li img:first');
    $active.addClass('last-active');
    $next.css({
        opacity: 0.0
    }).addClass('active').animate({
        opacity: 1.0
    }, 1000, function () {
        $active.removeClass('active lastActive');
    });
    if ($('#introScreen li img.active:last').is(':visible')) {
        setTimeout(function () {
            window.location.href = "/ibp/app.php";
        }, 1000);
        // 1 sec
    }
}
$(function () {
    setInterval("slideSwitch()", 5000);
});

EDIT: I’m trying a different approach using the Cycle jQuery plugin with the following code:

HTML:

<div id="introScreen">
    <ul id="slides">
        <li><img src="images/screen01-placeholder.png" alt="Screen 01 Placeholder" /></li>
        <li><img src="images/screen01-placeholder.png" alt="Screen 01 Placeholder" /></li>
        <li><img src="images/screen01-placeholder.png" alt="Screen 01 Placeholder" /></li>
        <li><img src="images/screen01-placeholder.png" alt="Screen 01 Placeholder" /></li>
        <li><img src="images/screen01-placeholder.png" alt="Screen 01 Placeholder" /></li>
        <li><img src="images/screen01-placeholder.png" alt="Screen 01 Placeholder" /></li>
        <li><img src="images/screen01-placeholder.png" alt="Screen 01 Placeholder" /></li>
        <li><img src="images/screen01-placeholder.png" alt="Screen 01 Placeholder" /></li>
        <li><img src="images/screen01-placeholder.png" alt="Screen 01 Placeholder" /></li>
        <li><img src="images/screen01-placeholder.png" alt="Screen 01 Placeholder" /></li>
    </ul>
</div>

jQuery:

$("ul#slides").cycle({
    fx: 'fade',
    pause: 2
});
if ($('ul#slides li:last').is(':visible')) {
    setTimeout(function () {
        window.location.href = "/ibp/app.php";
    }, 1000);
    // 1 sec
}

Now the images fade in to each other fine but again now the page does not redirect? Any ideas guys?

Answer 1

Use is(":visible") to check whether the element is visible or not:

if($('...:last').is(':visible')) {
...
}

Another variant:

if($('...:last:visible').length /* == 1 */) {
...
}

I’ve removed all selectors except the ones that matter. I would rather place the logic in the code that changes the slides.

Edit 2

jQuery.cycle plugin fires various events. One of them is the after event that fires after a slide is displayed. Within that event you can check if it was the last slide and do whatever is necessary:

$("ul#slides").cycle({
    fx: 'fade',
    after: function() {
        if ($(this).next().length === 0) {
            alert("Place the redirection code here");
        }
    }
});

Demo here