I've managed to use the cycle plugin for jquery to successfully make a rotating slide show with both a tabbed navigation tool, and a link whose information is gathered from the alt tags of the images.
Both these elements work fine on their own, but when together it seems to break down. I've narrowed it down to a possible issue with the CSS, when the CSS is disabled all parts work fine. But I can't seem to narrow down what part of the CSS is causing this.
Anyone see anything I might be missing?
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>
<title>jquery fade</title>
<link rel="stylesheet" type="text/css" media="screen" href="jquery2.css" />
<script type="text/javascript" src="js/jquery-1.3.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript">
function onAfter() {
var link=null;
if($(this).attr("alt") == 'link1'){link="link1"}
else if ($(this).attr("alt") == 'link2') {link="link2"}
else if ($(this).attr("alt") == 'link3') {link="link3"}
else {link="link4"};
$('#text').html('<p><a href="' + link + '" target="_blank">' + this.alt + '</a></p>')};
$(document).ready(function(){
$('#myslides')
.before('<div id="nav">')
.cycle({
fx: 'fade',
speed: 500,
timeout: 3000,
after: onAfter,
pager: '#nav'
}) ;
});
</script>
</head>
<body>
<div id="content-area">
<div id="myslides">
<img src="image1" alt="alt1" title="title1"/>
<img src="image2" alt="alt2" title="title2"/>
<img src="image3" alt="alt3" title="title3"/></a>
<img src="image4" alt="al4" title="title4"/></a>
</div>
<div id="text">
</div>
</div>
</body>
</html>
CSS: @charset "utf-8"; /* CSS Document */
body {
background: rgb(230,230,230);
}
#content-area{
width: 586px;
height: 311px;
}
#myslides {
width: 586px;
height: 311px;
padding: 0;
margin: 0 auto;
z-index: 0;
}
#myslides img {
width: 586px;
height: 311px;
top: 0;
left: 0;
border : 0;
}
#text {
height: 34px;
width: 586px;
background-image:url(images/text-transperancy.png);
position: absolute;
top: 285px;
z-index:50;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFF;
}
#text p {
margin-left: 10px;
line-height: 10px;
}
#text a {
outline: none;
border : 0;
text-decoration: none;
color:#FFF;
}
#text a.visited {
color:#FFF;
}
#text a:focus {
outline: none;
border : 0;
color:#FFF;
text-decoration: none
}
#text a:link {
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
border : 0;
text-decoration: none;
}
#nav {
padding-left: 465px;
position: absolute;
top: 295px;
z-index: 100;
}
#nav a {
margin: 0 5px;
padding: 3px 5px;
border: 1px solid #fff;
background: #0079c2;
text-decoration: none;
z-index: 100;
}
#nav a.activeSlide {
background: #6eb43f;
z-index: 100;
}
#nav a:focus {
outline: none;
z-index: 100;
}
#nav a:link {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFF;
z-index: 100;
}