ciclo jQuery: 1 ciclo, più cercapersone

Question

Lettore di lunga data, poster per la prima volta. :)

Sto usando il plug -in JQuery Cycle, che può essere scaricato qui: http://jquery.malsup.com/cycle/

L'ho fatto funzionare bene per la parte post, ma è arrivata una richiesta per avere controlli di cercapersone sopra e sotto l'oggetto che cicla.

Sembra che il secondo cercapersone non venga raccolto, ma evidenziando il collegamento del cercapersone attivo e facendo clic sui controlli del secondo cercapersone aggiunge il "#" all'URL nella barra degli indirizzi.

Ho visto questo post: stackoverflow.com/questions/1663974/using-multiple-pagers-in-jquery-cycle-plugin

Quale tipo di ha senso ma non sono sicuro del perché sarebbe diverso dal mio, il mio risultato finale può essere visto qui: http://dev02.web.lumens.demandware.net/on/demandware.store/sites-logens-site/default/search-show?cgid=brands Se scorri fino in fondo.

L'HTML assomiglia a questo:

    <ul class="pager"></ul>
      <div id="list-screens" class="list-screens">
         <div class="list-view-row"><!-- content goes here-></div>
    </div>
    <ul class="pager"></ul>

Per JavaScript:

    jQuery(document).ready(function() {
        var markupBegin = '<li><a href="#">';
        var markupEnd = "</a></li>";
        var i = 0;
        var pagerArray = ["A - E","F - J", "K - O","P - T","U - Z", "#"];
        var detailPagerArray = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","${'#'}"];
        jQuery("${'#'}list-screens").children().each(function(index, element) {
        jQuery(".list-view .pager").append(markupBegin + pagerArray[i] + markupEnd);
        //if(i <jQuery("${'#'}list-screens").children().length - 1 ) {
        jQuery(".list-view .pager").append("<li class='divider'></li>");
        //}
        i++;
        });
        jQuery(".list-view .pager").append("<li><a href=\"#\">See All Brands</a>");
        jQuery(".list-view .pager").append("<li class='clear'></li>");
        // browse listview

        jQuery("#list-screens").cycle({
            fx:     'scrollLeft', 
            easing: 'linear', 
            timeout:  0,
            speed: 750,
            width:935,
            height:500,
            pager: ".list-view .pager",
            pagerAnchorBuilder: function(idx, slide) {
            // console.log(idx);
            //for every amount its over 1 we have to add an extra to account for the divider li

            if(idx == 0) { // shouldn't have to do anything
            } else {
                idx = idx + (idx);
            }
            return ".list-view .pager li:eq("+ idx +") a";
        },
        updateActivePagerLink : function(pager, currSlideIndex) {
            if(currSlideIndex != 0) {
                currSlideIndex = currSlideIndex + currSlideIndex;
            }
            jQuery(pager).find("li").removeClass("activeSlide").filter('li:eq('+currSlideIndex+')').addClass("activeSlide");
        }
    });

Probabilmente potrei provare a catturare i clic e agganciarmi agli eventi del ciclo e forzarlo in quel modo, ma sembra un po 'strano che questo non funzioni. Ho notato che esiste l'unica opzione per consentire ai clic sul collegamento. Non ero davvero sicuro che fosse quello di cui avevo bisogno. Grazie per tutto il vostro aiuto.

Answer 1

Puoi sempre ricadere sulla creazione del cercapersone manuale e la gestione dei clic

Un esempio potrebbe essere trovato qui:

http://jquery.malsup.com/cycle/goto2.html

Questo crea 1 cercapersone, ma puoi crearne molti proprio come in un secondo contatto

var bc = $('#buttonContainer'); 

var $container = $('#container').cycle({ 
    fx:     'scrollHorz', 
    speed:   300, 
    timeout: 0 
}); 

$container.children().each(function(i) { 
    // create input 
    $('<input type="button" value="'+(i+1)+'" />') 
        // append it to button container 
        .appendTo(bc) 
        // bind click handler 
        .click(function() { 
            // cycle to the corresponding slide 
            $container.cycle(i); 
            return false; 
        }); 
});