...

View Full Version : 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:

/* 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:


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

Philip M
12-14-2009, 03:29 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.


Please post in the Javascript Frameworks forum, or ask a mod to move you over.

Kor
12-14-2009, 03:51 PM
Moved in the JavaScript Frameworks sub-Forum

tomws
12-14-2009, 04:11 PM
This would be much easier to debug if you'd post a link to a live version.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum