[jQuery] jQuery Cycle pager with images
Hi,
I am fairly new to both jWuery and jQuery Cycle, but I have managed to
set-up my slideshow using images as the pagers. The problem is that I
want to be able to indicate which slide is currently being displayed
by toggling the pager image to unique one when it is active.
Essentially what I want to do is achieve the same sort of effect as
the .activeSlide attribute, but using images instead of CSS. Relevant
code below.
<script type="text/javascript">
$(function() {
$('#topleft').cycle({
fx: 'fade',
speed: 2500,
pager: '#nav',
pagerAnchorBuilder: function(idx, slide) {
// return sel string for existing anchor
return '#nav li:eq(' + (idx) + ') a';
}
});
});
$(function() {
$('#pauseButton').click(function() {
$('#topleft').cycle('pause');
});
$(function() {
$('#playButton').click(function() {
$('#topleft').cycle('resume');
});
});
});
<div id="navbar">
<ul id="nav">
<li><a class="cyclebutton" href="#"><img src="img/tab1.gif"
width="20"
height="20"></a></li>
<li><a class="cyclebutton" href="#"><img src="img/tab2.gif"
width="20"
height="20"></a></li>
<li><a class="cyclebutton" href="#"><img src="img/tab3.gif"
width="20"
height="20"></a></li>
</ul>
<div id="topleft" class="pics">
<a href="http://www.edc.ca/english/insurance.htm"><img id="1"
src="images1.jpg" width="748" height="272"></a>
<a href="http://www.edc.ca/english/bonding.htm"><img id="2"
src="images2.jpg" width="748" height="272"></a>
<a href="http://www.edc.ca/english/
corporate_domestic_powers.htm"><img id="3" src="images3.jpg"
width="748"
height="272"></a>
</div>
<input type="image" id="playButton" value="pause"
src="jquery.animated.innerfade/img/play.gif" width="20"
height="20">
<input type="image" id="pauseButton" value="play"
src="jquery.animated.innerfade/img/pause.gif" width="20"
height="20">
</div>