StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>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:</p> <pre><code>activ=$active.index(); ... $("#buttons img").eq(activ).attr('src','images/button_active.png'); </code></pre> <p>You could use this code [note that you should declare 'activ' as a variable, you don't really want it to be global]:</p> <pre><code>var next_active = $next.index(); //$active is changed to $next ... $("#buttons img") .eq(next_active) .attr('src','images/button_active.png'); </code></pre> <p><br /></p> <p>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:</p> <pre><code>$("#buttons img") .attr('src','images/button.png') .eq(next_active) .attr('src','images/button_active.png'); </code></pre> <p>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().</p> <p>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:</p> <pre><code>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); }); } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload