цикл jquery: pagerAnchorBuilder - PullRequest
Новая
       33

цикл jquery: pagerAnchorBuilder

0 голосов
/ 01 февраля 2012

Я использую pagerAnchorBuilder и хочу просто указать ссылку на определенное изображение на слайде. Так что ссылка на пейджер 1, затем будет ссылка на слайд 3, но я просто не могу заставить это работать. вот мой код, который кто-то установил для меня.

Пример страницы 

<script type="text/javascript">
$(document).ready(function(){
var start;
if(window.location.hash){
    start = window.location.hash.substr(1);
} else {
    start = 0;
}
$('#slideDesign').cycle({
startingSlide: start,
fx: 'fade',
speed: 'fast',
timeout: 0,
next:   '.nextBT', 
prev:   '.prevBT', 
pager: '.navDesign',
pagerAnchorBuilder: function(idx, slide) {
// return sel string for existing anchor
return '.navDesign li:eq(' + (idx) + ') a';
} 
});

});
</script>

1 Ответ

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

Я только что пропустил целую страницу pageanchorbuilder, это простой способ сделать что-нибудь причудливое.Это то, что я обнаружил, сработало лучше.

Сначала создайте свою стадию цикла и лоток для большого пальца следующим образом: 

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

Это также будет работать с несколькими галереями циклов на странице.

Теперь, если вы хотите связать большой палец 1 с слайдом 3, затем измените функцию последнего нажатия на +2 для каждого thumbIndex.Таким образом, большой палец 1 ссылается на слайд 3, а большой палец 2 - на слайд 4 (которого в данном случае не существует). 

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

Если это был только первый большой палец, который вы хотели добавить 2, тоВы можете сделать оператор if (имейте в виду, что это все индексация на основе 0), например: 

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