JQuery Cycle PageranchorBuilder

Question

Ich benutze das Cycle-Plugin für die Verwendung in einem Newsrotator. Dies bedeutet, dass ich Divs verwende, um die Folien anstelle von Bildern zu bevölkern.

Mein ultimatives Ziel ist es, einen Pager zu machen, bei dem anstelle der üblichen 1, 2, 3, 4 usw. er stattdessen das erste H3 -Tag in der Folie zurückgibt.

Ich kenne dies wahrscheinlich ein kleines Auswahlproblem, aber hier ist, was ich bisher benutze:

$('#scroll_wrap').cycle({
        fx: 'fade',
        pager: '#pager',
        pagerAnchorBuilder: function(idx, slide) { 
                return '<li><a href="#">' + slide.children("h3").textContent + '</a></li>';
        }

Ich habe auch so etwas ausprobiert:

    $('#scroll_wrap').cycle({
    fx: 'fade',
    pager: '#pager',
    pagerAnchorBuilder: function(idx, slide) { 
            var h3 = $('div',slide).children('h3');
            return '<li><a href="#">' + slide.h3 + '</a></li>';
    }

Wie Sie wahrscheinlich sagen können, bin ich immer noch ein Junger. :/

Kann mir jemand mit dem Seleciton helfen?

Answer 1

Ändern Sie die einzige Zeile in Ihrer Pageranchorbuilder -Funktion in dieser Frage:

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

Drei Dinge mussten geändert werden:

Slide => JQuery (Slide)
Weil JQuery Elemente mit seinen Helferfunktionen nicht erweitert, es sei denn, Sie sagen es. Dies ist eine unglückliche Nebenwirkung von JQuery, die die Prototypen von Eingeborenen (wie Element) nicht erweitert. Es bedeutet, dass Sie jedes Drittel in Ihren Code mit JQuery (x) einwickeln müssen.

Kinder ("H3") => Kinder ("H3"). Gl (0)
Da die Selektoren Arrays von Objekten zurückgeben, sollten Sie den ersten erfassen, nachdem Sie den Selektor getätigt haben. Andernfalls wird der folgende Methodenaufruf in der Kette auf den Elementsatz reagiert. JQuery sollte Dinge wie .Firstchild ("H3") anbieten.

textContent => .text ()
TextContent ist eine Mozilla -Sache und arbeitet an einigen Browsern nicht. Verwenden Sie hier die .Text () -Methode von JQuery. In diesem Fall hat JQuery nichts falsch gemacht.

Answer 2

Ich habe damit versucht und gearbeitet:

$(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>';
    }


});

Sougata

Answer 3

Dies ist die Lösung für die Suche nach einem DOM -Element:

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

Answer 4

Ich poste dies, weil diese Frage als hoher Rang erscheint. Ich denke, meine Lösung ist viel robuster.

Ich habe mich von der gesamten Ding von Pageanchorbuilder weggezogen. Dies ist, was ich fand, besser funktioniert und gibt Ihnen viel mehr Kontrolle über die Daumen.

Erstellen Sie zuerst Ihre Zyklusbühne und Ihr Daumenschale wie folgt:

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

Dann verwenden Sie diese JS, um die Miniaturansichten mit den Folien zu verknüpfen. Grundsätzlich Daumen 1 Links zu Rutschen 1 und so weiter.

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

Dies funktioniert auch mit mehreren Zyklusgalerie auf einer Seite. Denken Sie daran, dass die Folien keine Bilder sein müssen. Sie können so aufgebaut werden:

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