How to get a simple jQuery slideshow to work in jsfiddle

Question

Using the code from http://jonraasch.com/blog/a-simple-jquery-slideshow, I have created a jsfiddle.

The problem is the slideshow is not working in the jsfiddle so I can't then adapt it for my needs

What could the problem be?

http://jsfiddle.net/UUKP4/8/

Code:

  function slideSwitch() {
            var $active = $('#slideshow IMG.active');
        
            if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
        
            // use this to pull the images in the order they appear in the markup
            var $next =  $active.next().length ? $active.next()
                : $('#slideshow IMG:first');
                    
            $active.addClass('last-active');
        
            $next.css({opacity: 0.0})
                .addClass('active')
                .animate({opacity: 1.0}, 1000, function() {
                    $active.removeClass('active last-active');
                });
        }
        
        $(function() {
            setInterval( "slideSwitch()", 5000 );
        });
        
        </script>
        
        <style type="text/css">
        
        /*** set the width and height to match your images **/
        
        #slideshow {
            position:relative;
            height:350px;
        }
        
        #slideshow IMG {
            position:absolute;
            top:0;
            left:0;
            z-index:8;
            opacity:0.0;
        }
        
        #slideshow IMG.active {
            z-index:10;
            opacity:1.0;
        }
        
        #slideshow IMG.last-active {
            z-index:9;
        }
        
        </style>
        
                
        <div id="slideshow">
          <img src="http://jonraasch.com/img/slideshow/simple-jquery-slideshow.png" alt="Slideshow Image 1" class="active" />
          <img src="http://jonraasch.com/img/slideshow/mini-golf-ball.jpg" alt="Slideshow Image 2" />
          <img src="http://jonraasch.com/img/slideshow/jon-raasch.jpg" alt="Slideshow Image 3" />
          <img src="http://jonraasch.com/img/slideshow/ear-cleaning.jpg" alt="Slideshow Image 4" />
    </div>

Answer 1

You had a problem in your code. You had extra parenthesis on the handler you've sent to setInterval.

When sending handlers to functions, we don't write the parenthesis. If They're written, what actually happens is that the function (slideSwitch()) is called and its return value is being sent to the function (setInterval).

$(function () {
    setInterval(slideSwitch, 5000); // Not slideSwitch()
});

Now it's working

jsFiddle Demo