simple jQuery slideshow - following tutorial not going as planned

cyborg360 · 12-13-2009, 11:43 PM

Hi, this tutorial uses jQuery but I didn't see a forum for it, so I posted it here because it uses a bit of javascript too.

I was looking at this tutorial here trying to get a simple slideshow working:
http://jonraasch.com/blog/a-simple-jquery-slideshow

Not sure what I'm doing wrong here. When I F12 in Expression Web to preview the site, it just shows the three pics lined up next to each other and no slideshow. Any suggestions?

Here is my CSS code:

Code:

/* CSS layout */
#masthead {	height: 57px;
}
#top_nav {	height: 56px;
}
#slideshow {
    position:relative;
    height:350px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}

#slideshow IMG.active {
    z-index:10;
}

#slideshow IMG.last-active {
    z-index:9;
}

#page_content {
}
#footer {
}

Here is my HTML code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
.style1 {
	border-width: 0px;
	width: 861px;
}
</style>
<script type="text/javascript">
function slideSwitch() {
    var $active = $('#slideshow IMG.active');
    var $next = $active.next();    

    $next.addClass('active');

    $active.removeClass('active');
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});
function slideSwitch() {
    var $active = $('#slideshow IMG.active');
    var $next = $active.next();

    $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 );
});
function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    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>
</head>

<body style="margin-top: 150px; background-image: url('../images/background.png')">

<table align="center" cellpadding="2" class="style1">
	<tr>
		<td colspan="2" style="height: 40px">
		<img src="../images/LOGO3.png" style="height: 80px; width: 356px" /></td>
	</tr>
	<tr>
		<td style="height: 44px" colspan="2">&nbsp;</td>
	</tr>
	<tr>
		<td style="height: 202px; width: 979px">
		<div id="slideshow">
    <img src="LEGAL3H.png" alt="" class="active" height="20" width="185" />
    <img src="BOTTOM1VFRONTO.png" alt="" height="20" width="176" />
    <img src="BOTTOM3VFRONTH.png" alt="" height="20" width="176" />
</div></td>
		<td style="height: 202px; width: 447px"><marquee direction=up loop=true height="100" scrolldelay=500>
TCCG TCCG TCCG TCCG TCCG TCCG TCCG TCCG TCCG TCCG TCCG TCCG
TCCG TCCG TCCG TCCG TCCG TCCG TCCG TCCG TCCG TCCG TCCG TCCG
TCCG TCCG TCCG TCCG TCCG TCCG TCCG TCCG TCCG TCCG TCCG TCCG</marquee> </form>
		</td>
	</tr>
	<tr>
		<td colspan="2" style="height: 63px"></td>
	</tr>
	<tr>
		<td colspan="2">&nbsp;</td>
	</tr>
	<tr>
		<td colspan="2" style="height: 5px"></td>
	</tr>
</table>

</body>

</html>