I'm attempting to use the activeSlide class in the Cycle plugin, but I can't seem to get it to work properly using existing markup for the pager.
This is the code that I started with, and it works just fine (thanks to pritaeas.net):
<style type="text/css">
#nav { margin: 5px; }
#nav a { margin: 5px; padding: 3px 5px; border: 1px solid #ccc; background: #fff; text-decoration: none }
#nav a.activeSlide { background: #f00; }
#nav a:focus { outline: none; }
</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="font/MTRCT_400.font.js"></script>
<script type="text/javascript">
Cufon.replace('#nav a', { fontFamily: 'MTRCT' ,hover: true});
</script>
<script type="text/javascript">
$(function() {
$('#slideshow').cycle({
speed: 200,
timeout: 0,
pager: '#nav',
prev: '#prev',
next: '#next',
});
});
</script>
</head>
<body>
<div id="main">
<div class="testWrapper">
<div id="nav"></div>
</div>
<div id="slideshow" class="pics">
<img src="images/art_001.jpg" />
<img src="images/art_002.jpg" />
<img src="images/art_003.jpg" />
</div>
</div>But, the changes that I've made below that accommodate the page I'm designing break the activeSlide, even though the pager and previous/next function perfectly:
<style type="text/css">
#nav { margin: 5px; }
#nav a { margin: 5px; padding: 3px 5px; border: 1px solid #ccc; background: #fff; text-decoration: none }
#nav a.activeSlide { background: #f00; }
#nav a:focus { outline: none; }
</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="font/MTRCT_400.font.js"></script>
<script type="text/javascript">
Cufon.replace('#nav a', { fontFamily: 'MTRCT' ,hover: true});
</script>
<script type="text/javascript">
$(function() {
$('#slideshow').cycle({
speed: 200,
timeout: 0,
pager: '#nav',
prev: '#prev',
next: '#next',
pagerAnchorBuilder: function(idx, slide) {
return '#nav li:eq(' + (idx+1) + ') a';
}
});
});
</script>
</head>
<body>
<div id="main">
<div class="testWrapper">
<div id="nav">
<ul>
<li><a href="" id="prev">Prev</a></li>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="" id="next">Next</a></li>
</ul>
</div>
</div>
<div id="slideshow" class="pics">
<img src="images/art_001.jpg" />
<img src="images/art_002.jpg" />
<img src="images/art_003.jpg" />
</div>
</div>I would really appreciate some help in figuring this out.