[jQuery] jQuery Cycle Plugin: Implement Pager on existing navigation anchors

[Paul Walsh]

I have a problem with implementing the pager in the Cycle plugin. I
have an existing navigational structure, which is actually a playlist
- each link launches a new media file in an instance of flowplayer
[http://www.flowplayer.org]. I want to use each of these anchors to,
in addition, page another div block which has descriptions of the
media.

By default, the cycle plugin ADDS new anchors below my existing ones,
in the default format  - <a class="" href="#">1</a>.

I would like cycle to use my existing anchors, so that a single click
starts a new media file in flowplayer, and also changes the
description DIV to display the relevant description.

Here is my script for cycle:
<script type="text/javascript">
$('.clips2')
.before('<div class="halfLeft">')
.cycle({
    fx:     'turnDown',
    speed:  'fast',
    timeout: 0,
    pager:  '#nav'
});
</script>

Here is the playlist HTML:
<div class="clips" id="nav">
<a href="[*mediaPlayer1*]" title="[*mediaPlayer1Title*]"><span
class="trackNo">1.&nbsp;</span>[*mediaPlayer1Title*]</a>
<a href="[*mediaPlayer2*]" title="[*mediaPlayer2Title*]"><span
class="trackNo">2.&nbsp;</span>[*mediaPlayer2Title*]</a>
<a href="[*mediaPlayer3*]" title="[*mediaPlayer3Title*]"><span
class="trackNo">3.&nbsp;</span>[*mediaPlayer3Title*]</a>
<a href="[*mediaPlayer4*]" title="[*mediaPlayer4Title*]"><span
class="trackNo">4.&nbsp;</span>[*mediaPlayer4Title*]</a>
<a href="[*mediaPlayer5*]" title="[*mediaPlayer5Title*]"><span
class="trackNo">5.&nbsp;</span>[*mediaPlayer5Title*]</a>
<a href="[*mediaPlayer6*]" title="[*mediaPlayer6Title*]"><span
class="trackNo">6.&nbsp;</span>[*mediaPlayer6Title*]</a>
<a href="[*mediaPlayer7*]" title="[*mediaPlayer7Title*]"><span
class="trackNo">7.&nbsp;</span>[*mediaPlayer7Title*]</a>
<a href="[*mediaPlayer8*]" title="[*mediaPlayer8Title*]"><span
class="trackNo">8.&nbsp;</span>[*mediaPlayer8Title*]</a>
</div>

Here is the div with the media descriptions:
<div class="row">
   <div class="descriptions left">
     <div class="clips2">
        [*mediaPlayer1Text*]
        [*mediaPlayer2Text*]
        [*mediaPlayer3Text*]
        [*mediaPlayer4Text*]
        [*mediaPlayer5Text*]
        [*mediaPlayer6Text*]
        [*mediaPlayer7Text*]
        [*mediaPlayer8Text*]
     </div>
   </div>
</div>

Can anyone help?

Thanks.