What's wrong with this jQuery fading gallery code?
- by Meep3D
So I am creating a fading gallery and am a bit of a noob to javascript (but not to programming). I have no idea what is wrong though. Here's the function in question:
/*
*/
function show_next ()
{
// Hide current
$('.s_gallery_images li.s_current').fadeTo(200, .2);
$('.s_gallery_images li.s_current').css("border","1px green solid");
//
if ($('.s_gallery_images li').hasClass ('.s_current'))
{
console.log ('Incrementing existing');
// Class already exists
$('.s_current:first').removeClass('s_current').next().addClass('s_current');
// Was that the last one?
if ($('.s_gallery_images li').hasClass ('.s_current'))
{
console.log ('Current found');
}
else
{
// Class doesn't exist - add to first
$('.s_gallery_images li:first').addClass ('.s_current');
console.log ('Wrapping');
}
}
else
{
console.log ('Adding new class');
// Class doesn't exist - add to first
$('.s_gallery_images li:first').addClass ('.s_current');
}
// Show new marked item
$('.s_gallery_images li.s_current').fadeTo(200, .8);
}
The HTML is a very simple:
<ul class="s_gallery_images">
<li><img src="imagename" alt="alt" /></li>
<li><img src="imagename" alt="alt" /></li>
<li><img src="imagename" alt="alt" /></li>
</ul>
And it displays the list and the images fine. I am using firebugs console.log for debugging, plus have a class set for s_current (bright border) but nothing happens at all.
The firebug console log says:
Adding New Class
Incrementing Existing
Current Found
Incrementing Existing
Current Found
Incrementing Existing
Current Found
Incrementing Existing
Current Found
... to infinity
The function is called on a setInterval timer, and as far as I can tell it should be working (and I have done something similar before), but it just isn't happening :(
