jQuery Cycle pagerAnchorBuilder проблема с IE8 и ниже - PullRequest
0 голосов
/ 14 октября 2011

Следующий код:

<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>';
   }
});

отлично работает в Chrome, Firefox и IE9, но в IE8 и ниже я получаю вдвое больше вкладок, и половина из них говорит 'undefined'.Если я перемещу якорь так, чтобы он обернул все содержимое (т.е. только внутри <li>), то IE8 отобразит правильные вкладки, но это не совсем работает с тем, что я пытаюсь выполнить.

Есть ли способ заставить это работать в IE8 с разметкой, которую я имею в настоящее время?

1 Ответ

0 голосов
/ 01 мая 2012

У меня были проблемы со всем, что связано с pageanchorbuilder, это простой способ сделать что-то причудливое.Это также вынуждает вас использовать списки, которые, я думаю, являются источником ваших проблем (IE8 и lists == проблема!).Это то, что я обнаружил, работало лучше.

Сначала создайте свой цикл Cycle и лоток для большого пальца, как это.Теперь у вас есть полный контроль над форматом!

<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>

Затем используйте этот JS, чтобы связать миниатюры со слайдами.По сути, ссылки большого пальца 1 на слайд 1 и т. Д.

// 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);
});

Это также будет работать с несколькими галереями циклов на странице.Я думаю, что решит ваши проблемы.

...