Buscapersonas de ciclo jQueryAnchorBuilder

Question

Estoy usando el complemento Cycle para usarlo en un rotador de noticias.Esto significa que estoy usando Div para completar las diapositivas en lugar de imágenes.

Mi objetivo final es hacer un buscapersonas donde en lugar del habitual 1, 2, 3, 4, etc.- en su lugar, devuelve la primera etiqueta H3 de la diapositiva.

Sé que probablemente se trate de un problema menor de selección, pero esto es lo que estoy usando hasta ahora:

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

También probé algo como esto:

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

Como probablemente puedas ver, todavía soy un novato.:/

¿Alguien puede ayudarme con la selección?

Answer 1

Cambie la línea en su función pagerAnchorBuilder a esto:

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

Hay tres cosas que se necesitan para ser cambiado:

slide => jQuery (tobogán)
Debido a que jQuery no se extiende elementos con sus funciones de ayuda a menos que se lo indique. Este es un efecto secundario desafortunado de jQuery no extender los prototipos de nativos (como Element). Esto significa que usted tiene que envolver cada tercera cosa en su código con jQuery (x).

niños ( "h3") => niños ( "h3"). Eq (0)
Debido a que los selectores de retorno matrices de objetos emparejados, se debe agarrar el primero después de hacer el selector de lo contrario la siguiente llamada al método en la cadena actuará sobre el conjunto de elementos. JQuery debe ofrecer cosas como .firstChild ( "H3").

textContent => .text ()
textContent es una cosa Mozilla, y no funcionará en algunos navegadores. Utilizar el método de jQuery .text () aquí. En este caso jQuery no hizo nada malo.

Answer 2

Probé con esto y funcionó:

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

Esta es la solución para la búsqueda en cualquier elemento DOM:

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

Answer 4

Estoy publicar esto, porque esta pregunta surge como un alto rango. Creo que mi solución es mucho más robusto.

Me alejé de todo el asunto pageanchorbuilder, es engorroso para manera de hacer algo de fantasía. Esto es lo que he encontrado funcionó mejor y le da mucho más control sobre los pulgares.

En primer lugar construir su etapa del ciclo y la bandeja pulgar como esto:

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

A continuación, utilice este JS para vincular las miniaturas para las diapositivas. Básicamente, el pulgar 1 enlaces para deslizar 1 y así sucesivamente.

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

Esto funciona con múltiples galería de Ciclo en una página también. Tenga en cuenta las diapositivas no tienen que ser imágenes. Ellos etapa se podrían construir de esta manera:

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