Question

I’ve got a piece of code which loops through the images in a named div. Each image is displayed in turn with the jquery slide effect being invoked to make the slideshow slightly more interesting. Once the slide effect has completed I hide the image which was previously shown so that it can slide again later.

Everything is fine except when I go back to show the first image in the div, at which point the slide effect doesn’t show. This pattern repeats for every iteration through the loop.

The css for the page sets img to have display:none such that all images are intially hidden.

The code is as follows:

$(function()
{
    // Sort out the handling of the slider (if it exists)
    if ($('#slider').length != 0)
    {
        var allImgs = $('#slider img');
        var $active = allImgs.eq(0);

        $active.show(0, function()
        {
            var $next = $active.next();
            var timer = setInterval(function() 
            {
                // Make the effect happen on the next one in the list
                $next.show("slide", { direction: "left" }, "slow", function()
                {
                    $active.hide(0, function()
                    {
                        $active = $next;
                        $next = (allImgs.last().index() == allImgs.index($active)) ? 
                                allImgs.eq(0) : $active.next();
                    });
                });
            }, 5000);
        });
    }
}); 

To me the code looks like it should work – what obvious thing am I missing?

EDIT

Thanks to mccannf, I changed my CSS so that the #slider img had z-index:100; and then changed my code as follows:

$next.show("slide", { direction: "left" }, "slow", function()
{
    $next.css("z-index", 99);
    $active.hide(0, function()
    {
        $active.css("z-index", 100);
        $active = $next;
        $next = (allImgs.last().index() == allImgs.index($active)) 
                ? allImgs.eq(0) : $active.next();
     });
 });

Answer 1

The z-index of the images is controlling what overlaps what.

It is possible that the first image in your slideshow has the lowest z-index and so when it slides across the last image in the slideshow, it is in fact sliding underneath that last image. It is only revealed when you hide the last image. You need to make the sliding animation have a higher z-index, e.g.

.ui-effects-wrapper {
        z-index: 100 !important;
}