Search code examples
jquerycyclepager

Change Jquery Cycle plugin code (move Pager position)

I have this:

<script type="text/javascript">
$(function() {
$('#slideshow').after('<div id="slideshow-nav">').cycle({
    fx:       'fade',
    timeout:   0,
    prev: '#prev',
    next: '#next',
    fit:1,
    pager:      '#slideshow-prevnext',
    pagerAnchorBuilder: function(idx, slide) { 
    return '<a class="dot" href="#">&nbsp;</a>'; 
        }
});
});

And it makes HTML markup like this:

 <div id="slideshow-prevnext" class="slideshow-prevnext"> 
   <a id="prev" class="left"  href="#"><span class="invisible">Prev</span></a> 
   <a id="next" class="right" href="#"><span class="invisible">Next</span></a> 
   <a href="#" class="dot">&nbsp;</a>
   <a href="#" class="dot">&nbsp;</a>
   <a href="#" class="dot">&nbsp;</a>
</div>

How can I change Cycle option so that it can move the three "dot" class before "Prev" and "Next"? Such as:

 <div id="slideshow-prevnext" class="slideshow-prevnext"> 
   <a href="#" class="dot">&nbsp;</a>
   <a href="#" class="dot">&nbsp;</a>
   <a href="#" class="dot">&nbsp;</a>
   <a id="prev" class="left"  href="#"><span class="invisible">Prev</span></a> 
   <a id="next" class="right" href="#"><span class="invisible">Next</span></a> 
</div>

Thank you,

Solution

  • http://forum.jquery.com/topic/change-jquery-cycle-plugin-code-move-pager-position