I have successfully integrated the cycle plugin for jQuery to create a dynamic rotating slideshow with tabbed navigation and links derived from image alt tags.
While each element functions properly on its own, they appear to clash when combined. After some investigation, I suspect an issue within the CSS as disabling it resolves the problem. However, pinpointing the exact CSS culprit has proven challenging.
Is there something obvious that I might be overlooking?
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;
}