jQuery Цикл pagerAnchorBuilder

Измените одну строку в вашей функции pagerAnchorBuilder на это:

return '<li><a href="#">' + jQuery(slide).children("h3").eq(0).text() + '</a></li>';

Необходимо было изменить три вещи:

slide => jQuery(slide)
Потому что jQuery не расширяет элементы с помощью своих вспомогательных функций, если вы не скажете ему об этом. Это неприятный побочный эффект того, что jQuery не расширяет прототипы нативов (таких как Element). Это означает, что вы должны обернуть каждую третью вещь в своем коде с помощью jQuery (x).

children("h3") => children("h3").eq(0)
Поскольку селекторы возвращают массивы совпадающих объектов, вы должны взять первый из них после того, как сделаете селектор, иначе следующий вызов метода в цепочке будет действовать на набор элементов. Jquery должен предлагать такие вещи, как .firstChild("h3").

textContent => .text()
textContent — это вещь Mozilla, и она не будет работать в некоторых браузерах. Используйте здесь метод jQuery .text(). В этом случае jQuery не сделал ничего плохого.

Я пробовал с этим и работал:

$(function() {
$('#featured .container').before('<ul id="nav">').cycle({
    fx: 'scrollLeft',
    speed: 300,
    timeout: 5000, 
    next: '.next',
    prev: '.previous',
    pager:  '#nav',
    pagerAnchorBuilder: function(idx, slide) {
      var img = $(slide).children('.thumb').children().eq(0).attr("src");
      return '<li><a href="#"><img src="' + img + '" width="50" height="50" /></a></li>';
    }


});

Сугата

Это решение для поиска в любом элементе DOM:

pagerAnchorBuilder: function(idx, slide) {
  return '<li><a href="#"> img src="' + jQuery(slide).find('img').attr('src') + '" width="70" height="50" / </a></li>';
}

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

Я отошел от всего, что связано с 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 on click
jQuery('.gallery .thumb').click(function(){
    var thumbIndex = jQuery(this).closest('.gallery').find('.thumb').index(jQuery(this));
    jQuery(this).closest('.gallery').find('.stage').cycle(thumbIndex);
});

Это также будет работать с несколькими галереями Cycle на странице. Имейте в виду, что слайды не обязательно должны быть изображениями. Сцена может быть построена так:

    <div class="stage">
        <div class="slide">Slide 1</div>
        <div class="slide">Slide 2</div>
        <div class="slide">Slide 3</div>
    </div>