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?
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>
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