jQuery Cycle pagerAnchorBuilder

Bin ich mit dem Cycle-plugin für die Verwendung in einem news-rotator. Das bedeutet, ich bin mit Div ' s zu füllen die Folien anstatt von Bildern.

Mein Ziel ist es, einen pager, wo statt der üblichen 1, 2, 3, 4, etc. - stattdessen gibt die erste H3-tag in der Folie.

Ich weiß, dies ist wahrscheinlich eine kleinere Auswahl Thema, aber hier ist, was ich mit so weit:

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

Ich habe auch versucht, so etwas wie dieses:

    $('#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, ich bin immer noch ein junge. :/

Kann mir jemand helfen mit der seleciton??

InformationsquelleAutor Casey Wight | 2009-09-02

14

Ändern, das eine Zeile in Ihrem pagerAnchorBuilder Funktion zu diesem:
```
return '<li><a href="#">' + jQuery(slide).children("h3").eq(0).text() + '</a></li>';
```
Drei Dinge mussten geändert werden:

Folie => jQuery(slide)

Weil jQuery nicht verlängern Elemente mit seiner Helfer-Funktionen, wenn Sie sagen, es zu. Dies ist eine unglückliche Nebenwirkung von jQuery nicht länger als die Prototypen der Eingeborenen (wie Element). Es heißt, Sie haben zu wickeln jede Dritte, was Sie in Ihrem code mit jQuery(x).

Kinder("h3") => die Kinder("h3").eq(0)

Weil Selektoren return arrays von Objekten aufeinander abgestimmt, so sollten Sie schnappen Sie die erste, nachdem Sie den Selektor im übrigen die folgenden Methodenaufruf in der Kette wird auf die Elemente. Jquery sollte bieten Dinge wie .firstChild("h3").

textContent => .text()

textContent ist ein mozilla-Sache, und wird nicht funktionieren bei einigen Browsern. Die Verwendung von jQuery .text () - Methode hier. In diesem Fall jQuery nichts falsch gemacht.
- Genau. Du bist der Mann! Ganz ein hübscher Kerl zu. Nochmals vielen Dank!
InformationsquelleAutor 3n.

Ich habe versucht, mit diesem, und arbeitete:

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

InformationsquelleAutor Sougata Das

4

Dies ist die Lösung für die Suche in jedem DOM-element:
```
pagerAnchorBuilder: function(idx, slide) {
  return '<li><a href="#"> img src="' + jQuery(slide).find('img').attr('src') + '" width="70" height="50" /</a></li>';
}
```
- Dies funktionierte großartig für mich. Ich hatte Probleme, das Bild als Quelle, es war in einem <li> tag. Von Ihnen positiv bewertet werden.
- du hast vergessen den Anfang und das schließende tag < >, auf jeden Fall bin ich dankbar, dass ich Ihr in Ihrem Beitrag. danke es hilft mir.
InformationsquelleAutor dannyfilth

Ich bin dieses posting, weil diese Frage kommt als ein hoher Rang. Ich denke, meine Lösung ist viel robuster.

Zog ich Weg von den ganzen pageanchorbuilder Sache, das ist viel zu umständlich, für etwas ausgefallenes. Dies ist, was ich gefunden habe funktionierte besser und gibt Ihnen viel mehr Kontrolle über den Daumen.

Erste build aus dem Zyklus Bühne und Daumen Fach wie diesem:

<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-link die Miniaturansichten der Folien. Im Grunde, Daumen 1 links schieben 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);
});

Diese arbeiten mit mehreren Zyklus Galerie auf einer Seite zu. Beachten Sie die Folien sind nicht an die Bilder. Die Bühne gebaut werden konnte wie diese:

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

Dies funktioniert gut, wie kann ich eine aktive css-Klasse active-Daumen-Sache? Dank
Mark, du meinst eine aktive Klasse, wenn Sie auf ein Daumen? Oder eine aktive Klasse, die updates, wenn Zyklus ist auf auto gesetzt-Zyklus?

InformationsquelleAutor Drew Baker

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.