Question

I have built a JQuery CSS3 image gallery. The problem is that the next function in the code below is not working problem.

function gallery() {

        var islide = $('.cornerimg:visible');
        $(islide).removeClass('cornerimgfocus');
        $(islide).next().addClass('cornerimgfocus');
        setTimeout(function() {
            gallery()
        },4000);
}
$(window).load(function() {
    $( '.cornerimg' ).first().addClass('cornerimgfocus');
    setTimeout(function() {
            gallery()
        },4000);
});

The next function is operating on all the next elements not just the next one. The result being that all elements that follow the first one with class .cornerimg are becoming visible at once.

HTML

<div class="imageitem">    
    <div class="cornerimg" style="background-image:url(http://www.golfbrowser.com/wp-content/uploads/2011/05/DSC00764s-968x400.jpg);"></div>
    <div class="cornerimg" style="background-image:url(http://www.golfbrowser.com/wp-content/uploads/2011/05/DSC00762s-968x400.jpg);"></div>
    <div class="cornerimg" style="background-image:url(http://www.golfbrowser.com/wp-content/uploads/2011/05/DSC00759s-968x400.jpg);"></div>
</div>

Any ideas?

Marvellous

Answer 1

Why don’t you select with .cornerimgfocus. This is the slide that should be / is visible, as far as I can see from your code. :visible selector seems to select all divs.

function gallery() {

        var islide = $('.cornerimgfocus');
        islide.removeClass('cornerimgfocus');
        islide.next().addClass('cornerimgfocus');
        setTimeout(function() {
            gallery()
        },4000);
}