CODEWITHSUNDEEP
javascriptjqueryhtml
Meep3D
Meep3D

Reputation: 3756

What's wrong with this jQuery fading gallery code?

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 :(

Upvotes: 0

Views: 60

Answers (2)

Nick Craver
Nick Craver

Reputation: 630637

In your code, you have some extra dots flying around:

.hasClass ('.s_current')

hasClass just needs the class name, no dot like this: .hasClass('s_current')

Same for addClass: .addClass('.s_current') should be .addClass('s_current')

Overall you could shorten the logic a bit as well:

function show_next ()
{
  $('.s_gallery_images li.s_current').css("border","1px green solid")
                                     .fadeTo(200, .2);
  if ($('.s_gallery_images li.s_current').length)
      $('.s_current').removeClass('s_current').next().addClass('s_current');
  if(!$('.s_gallery_images li.s_current').length)
      $('.s_gallery_images li:first').addClass('s_current');
  $('.s_gallery_images li.s_current').fadeTo(200, .8);
}

Upvotes: 1

jitter
jitter

Reputation: 54625

You have a few . points too much in a few function calls. The .classname syntax is only used for selector syntax, but not when checking/adding/removing class with hasClass/addClass/removeClass

hasClass ('.s_current') ↯

hasClass ('s_current') ✔

addClass ('.s_current') ↯

addClass ('s_current') ✔

Upvotes: 1

Related Questions