Hi,
I've done that before.
Check this website: http://www.hoveniersbedrijfdeweerdt.nl/
You can see that the active pager image gets a class. With that class
you can change it's appearance with CSS.
Goodluck!
Admire
On Jul 23, 6:10 pm, matttr <tmat...@gmail.com> wrote:
> Hi,
>
> I am fairly new to both jWuery and jQueryCycle, 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>
