jQuery Cycle pagerAnchorBuilder

Je suis en utilisant le Cycle de plugin pour une utilisation dans un communiqué-des rotateurs. Ce qui signifie que je suis à l'aide de Div pour remplir les diapositives au lieu d'images.

Mon but ultime est de faire un pager où, au lieu de l'habituel 1, 2, 3, 4, etc. - il au lieu de cela renvoie le premier tag H3 dans la diapositive.

Je sais que c'est probablement un mineur question de sélection, mais voici ce que j'utilise jusqu'à présent:

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

J'ai aussi essayé quelque chose comme ceci:

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

Comme vous pouvez le dire, je suis encore un novice. :/

Quelqu'un peut m'aider avec les seleciton??

OriginalL'auteur Casey Wight | 2009-09-02

14

Modifier une ligne dans votre pagerAnchorBuilder fonction:
```
return '<li><a href="#">' + jQuery(slide).children("h3").eq(0).text() + '</a></li>';
```
Trois choses nécessaires pour être changé:

slide => jQuery(diapo)

Parce que jQuery ne pas prolonger les éléments avec ses fonctions d'assistance sauf si vous lui dites. C'est un malheureux effet secondaire de jQuery ne s'étendant pas les prototypes des indigènes (comme Élément). Cela signifie que vous devez envelopper chaque troisième chose dans votre code avec jQuery(x).

enfants("h3") => enfants("h3").eq(0)

Car les sélecteurs de retour de tableaux d'objets appariés, vous devez saisir le premier après vous ne le sélecteur sinon, l'appel de méthode suivant dans la chaîne va agir sur l'ensemble des éléments. Jquery doit offrir des choses comme .firstChild("h3").

textContent => .texte()

textContent est un mozilla chose, et ne fonctionnent pas sur certains navigateurs. Utilisation de jQuery .texte() la méthode ici. Dans ce cas, jQuery n'a rien fait de mal.

Exactement. Vous êtes l'homme! Tout à fait un beau mec trop. Merci encore!

OriginalL'auteur 3n.

J'ai essayé avec cela, et a travaillé:

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

OriginalL'auteur Sougata Das

4

C'est la solution pour la recherche dans n'importe quel élément du DOM:
```
pagerAnchorBuilder: function(idx, slide) {
  return '<li><a href="#"> img src="' + jQuery(slide).find('img').attr('src') + '" width="70" height="50" /</a></li>';
}
```
Cela a très bien fonctionné pour moi. J'ai eu du mal à trouver la source de l'image comme il était à l'intérieur d'un <li> tag. Upvoted.
vous avez oublié le début et la balise de fermeture < >, de toute façon je suis reconnaissant que je suis dans votre post. je vous remercie il m'aider.

OriginalL'auteur dannyfilth

Je poste ce, parce que cette question revient comme un haut rang. Je pense que ma solution est beaucoup plus robuste.

J'ai déménagé loin de l'ensemble de la pageanchorbuilder chose, c'est la façon de la lourdeur de faire quelque chose de fantaisie. C'est ce que j'ai trouvé travaillent mieux et vous donne beaucoup plus de contrôle sur le pouce.

D'abord construire votre étape du Cycle de pouce plateau comme ceci:

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

Ensuite utiliser ce JS pour relier les vignettes pour les diapositives. Fondamentalement, pouce 1 liens à la diapositive 1 et ainsi de suite.

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

Cela fonctionne avec de multiples Cycle de la galerie sur une page de trop. Gardez à l'esprit les diapositives n'ont pas à être des images. Ils étape pourrait être construit comme ceci:

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

Cela fonctionne très bien, comment puis-je ajouter un actif de la classe css à l'actif de pouce? Merci
Marque, voulez-vous dire une classe active lorsque vous cliquez sur un pouce? Ou une classe active que les mises à jour si le Cycle est réglé sur auto-cycle?

OriginalL'auteur Drew Baker

Vous devez vous connecter pour publier un commentaire.