Image gallery, FadeOut and navigation in jQuery

Question

I'm trying to create an image gallery, but I'm facing a little problem with navigation. The problem is following: Whenever picture finishes with fading out, the little button changes its color, but I want my little button to change itself as soon as the current image starts fading out, not when it has finished fading out.

HTML:

<div id="portfolio_cycler">

    <img class="active" src="images/pic1.jpg" alt="picture 1"  /> 
    <img src="images/pic2.jpg" alt="picture 2" />
    <img src="images/pic3.jpg" alt="picture 3" />
    <img src="images/pic4.jpg" alt="picture 4" />
    <img src="images/pic5.jpg" alt="picture 5" /> 

</div>

CSS:

#portfolio_cycler{
position:relative;
left: 55px;
top: 50px;
}
#portfolio_cycler img{
position:absolute;z-index:1
}
#portfolio_cycler img.active{
z-index:3
}
#buttons{
position:absolute;
top: 490px;
left: 55px;
}

jQuery:

function cycleImages(){

  var $active = $('#portfolio_cycler .active');



  var $next = ($('#portfolio_cycler .active').next().length > 0) ? $('#portfolio_cycler .active').next() : $('#portfolio_cycler img:first');
  activ=$active.index(); // INDEX TRENUTNO AKTIVNOG ELEMENTA

  $next.css('z-index',2);//move the next image up the pile
   $("#buttons img").eq(activ).attr('src','images/button_active.png');
  $active.fadeOut(1500,function(){//fade out the top image 
  $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image

  $next.css('z-index',3).delay(4000).addClass('active');//make the next image the top one
  cycleImages()
  });
}

$(document).ready(function(){
pic_number=$("#portfolio_cycler img").length;
for (i=0;i<pic_number;i++)
{
    $("#buttons").append("<a href='javascript:void(0)'><img src='images/button.png' /></a>");
}
// run every 7s
setTimeout('cycleImages()', 4000);

});

Since my question might be confusing to some, I want to achieve similar effect: http://static.dreamcss.com/wp-content/uploads/example/ You notice how the active button changes just before the current image starts to slide? I want to achieve same thing with my buttons here.

Answer 1

What you've done is to 'activate' the button for the image that is going to fade out. I believe you want to activate the button for the image that is to be shown next? Instead of the following code:

activ=$active.index();
...
$("#buttons img").eq(activ).attr('src','images/button_active.png');

You could use this code [note that you should declare 'activ' as a variable, you don't really want it to be global]:

var next_active = $next.index();   //$active is changed to $next
...
$("#buttons img")
    .eq(next_active)
    .attr('src','images/button_active.png');

I'm not 100% sure of your aim here, but you may also want to reset the non-active buttons to the original image, in which case, you'd use:

$("#buttons img")
    .attr('src','images/button.png')
    .eq(next_active)
    .attr('src','images/button_active.png');

EDIT: Okay, your main problem lies in your usage of the delay() function. This will only create a delay in the chain, but the code on the next line will get executed immediately. Use setTimeout() here instead of the delay() because you want to delay the execution of the next call of cycleImages().

You will also have to make the changes I've mentioned above, otherwise the button for the image that just faded out will be active. All in all, the following jQuery code should work for your cycleImages function:

function cycleImages(){

    var $active = $('#portfolio_cycler .active');
    var $next = ($active.next().length > 0) ? $active.next() : $('#portfolio_cycler img:first');
    // Note the use of $active instead of using selectors again

    var next_active = $next.index();
    $next.css('z-index',2);
    $("#buttons img").eq(next_active).attr('src','images/button_active.png');

    $active.fadeOut(1500, function() {
        $active.css('z-index',1).show().removeClass('active');
        $next.addClass('active');
        /* You can add the class active to $next immediately here.
           The delay is instead needed before the function call below, hence
           setTimeout is used. Also since you have set the z-index of an active
           image to 3 in your css, setting it in the javascript is redundant */

        setTimeout(cycleImages, 4000);
    });
}