How to add leading zero to Malsup Cycle Pager?

I would like to know if it is possible for me to add a leading '0' for the #nav part of the Malsup Cycle Double Pager (http://www.malsup.com/jquery/cycle/pager-double2.html) - for numbers less than 10?

The script is:

<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').each(function(index) {
$(this).cycle({
fx: index ? 'fade' : 'scrollHorz',
timeout: 0,
speed: 400,
sync: false,
pager: '#nav',
prev: '#prev',
next: '#next',
pagerAnchorBuilder: function(i) {
if (index == 0)

// for first slideshow
return '<a href="#">'+(i+1)+'</a>';
// for 2nd slideshow
return '#nav a:eq('+i+')';
}
});
});
});
</script>

Also, is it possible to separate each of the #nav numbers with a space, without the need to use CSS3 word-wrap: break-word;? (so it wraps inside a DIV).

Many thanks for your help.
Ian

something like:

return '#nav a:eq('+("00"+i).slice(-2)+')';
should support up to 99 anchors.

use display:inline-block, and float:left to make your nav items wrap inside their container.

Forgive my lack of Javascript knowledge, but I'm not seeing any prefix of '0' before the numbers (under 10) when I try your code?

Am I to put it in at a certain place, or change anything that's their?
- I tried adding your code after the second 'return', and before it;
- I tried replacing the second 'return';
- I tried replacing the first 'return';
- and I tried replacing both of the existing 'return's' with just your 'return'... but none of them show a leading '0'?

The numbers generated by the #nav are not 'li', as the css for where they appear is simply within a 'div'. Maybe this code needs to be changed to represent a css unordered list, as per Malsup's standard Pager example (http://jquery.malsup.com/cycle/pager11.html)? (which also eliminates the spacing issue) - but I'm not sure how to do it?

Any thoughts would be most welcome.
Ian

your second return will never happen, not sure what it should do.

if the first return is spitting out visible html, then use my slice trick there to fix your padding issue:

// for first slideshow
return '<a href="#">'+("00"+i).slice(-2)+'</a>';
// for 2nd slideshow
return '#nav a:eq('+i+')';