jQuery Cycle pagerAnchorBuilder issue with IE8 and lower

The following code:

<ul>
   <li>
     <div>
       <h2>Surveys</h2>
         <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
         <p class="more"><a href="#" title="XXXXX>XXXXX</a></p>
     </div>
   </li>
</ul>

$('.tabs ul')
  .after('<div class="nav">')
     .cycle({
       cleartypeNoBg:true,
       timeout:10000,
       speed:350,
       pause:1,
       pager:'.tabs .nav',
       pagerAnchorBuilder:function(idx,slide){
       return'<a href="#">'+$(slide).find('.more a').attr('title')+'</a>';
   }
});

works fine in Chrome, Firefox and IE9, but in IE8 and lower, I get twice as many tabs and half of them say 'undefined'. If I move the anchor so that it wraps around all the contents (i.e. just inside the <li>) then IE8 shows the correct tabs, but that doesn't really work with what I'm trying to accomplish.

Is th开发者_JAVA百科ere any way to get this to work in IE8 with the markup I have currently?

I had problems with the whole pageanchorbuilder thing, it's way to basic for doing anything fancy. It also forces you into using lists, which I think is where you're problems are coming from (IE8 and lists == trouble!). This is what I found worked better.

First build out your Cycle stage and thumb tray like this. You now have complete control over the format!

<div class="gallery">
    <div class="stage">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
    </div>
    <div class="thumb-tray">
        <div class="thumb">Anything in here</div>
        <div class="thumb">Anything in here</div>
        <div class="thumb">Anything in here</div>
    </div>
</div>

Then use this JS to link the thumbnails to the slides. Basically, thumb 1 links to slide 1 and so on.

// Start Cycle
jQuery('.stage').cycle({ 
    timeout:  0,
});

// Make the thumbs change the stage
jQuery('.gallery .thumb').click(function(){
    var thumbIndex = jQuery(this).closest('.gallery').find('.thumb').index(jQuery(this));
    jQuery(this).closest('.gallery').find('.stage').cycle(thumbIndex);
});

This will work with multiple Cycle gallery's on a page too. I think will solve your problems.