retour sur mesure pager pour le cycle jquery utilisant Modulus

Question

Essayer d'obtenir ce téléavertisseur personnalisé au travail pour jQuery Cycle.

Je veux que le pagerAnchorBuilder pour retourner un article list toutes les 5 images afin plus tard, je peux mettre le téléavertisseur en propre cycle de lui.

Voici le code:

  pagerAnchorBuilder: function(idx,slide){
        var $slideCount = $('#ul-homecycle > li').length; 
            if ((idx==0) || (idx%5 === 0)){
                return '<li><a href="javascript:setSlide('+ idx +')" class="transhover"><img src="../images/home/thumb_carousel' + idx + '.jpg" width="183" height="72" /></a></li>';
            }
            else{ 
                return '<a href="javascript:setSlide('+ idx +')" class="transhover"><img src="../images/home/thumb_carousel' + idx + '.jpg" width="183" height="72" /></a>';

            }
    }

Donc à la fin du cycle que je veux revenir à ceci:

<ul>
<li>
<a href="javascript:void(0);">derp</a>
<a href="javascript:void(0);">derp</a>
<a href="javascript:void(0);">derp</a>
<a href="javascript:void(0);">derp</a>
<a href="javascript:void(0);">derp</a>
</li>
<li>
<a href="javascript:void(0);">derp</a>
<a href="javascript:void(0);">derp</a>
<a href="javascript:void(0);">derp</a>
<a href="javascript:void(0);">derp</a>
<a href="javascript:void(0);">derp</a>
</li>
</ul>

S'il vous plaît ne pas tenir compte du setSlide(#) et les valeurs de la classe du retour de chaîne HTML dans le JS, j'ai que sous contrôle. Je ne peux pas comprendre cela, même après 2 heures de recherche.

Merci à l'avance!

Answer 1

J'ai fini par figurer dehors. Voici le code modifié, a commenté pour votre commodité:

function cycles(){
    //Activate main slide with proper pager/carousel container.
    $('#ul-homecycle').after('<div id="homecycle-carousel-container"><a href="javascript:void(0);" id="btn-homecycle-prev" class="transhover"></a><a href="javascript:void(0);" id="btn-homecycle-next" class="transhover"></a><ul id="homecycle-carousel">').cycle({
        timeout: 7000,
        speed: 500,
        sync: true,
        fx: 'fade',
        fit: 0,
        startingSlide: 2,
        activePagerClass:'active',
        slideResize: 0,
        pager:  '#homecycle-carousel',
        pagerAnchorBuilder: function(idx,slide){
            return '<a href="javascript:setSlide('+ idx +')" class="transhover"><img src="../images/home/thumb_carousel' + idx + '.jpg" width="183" height="72" /></a>';
        },
        // Build pager that automagically hightlights updated pager thumb and also continue to next pager slide if the next thumb isn't visible
        updateActivePagerLink: function(pager, activeIndex) { 
            $(pager).find('a').not(':eq('+activeIndex+')').removeClass('active').children('img').fadeTo(200,.5)
            $(pager).find('a:eq('+activeIndex+')').addClass('active').children('img').fadeTo(200, 1); 

            //If next slide in carousel is hidden then go to next carousel slide
            if ($(pager).find('a:eq('+activeIndex+')').parent('li').css('display') == "none"){
                $('#homecycle-carousel').cycle('next');
            }
        }
    });
        //Before building the carousel wrap an Li around every 5 thumbs    
        $('#homecycle-carousel > a').each(function(i) {
           var a = $('#homecycle-carousel > a');
            for( var i = 0; i < a.length; i+=5 ) {
                a.slice(i, i+5).wrapAll('<li></li>');
            }
        });
        //Now that we have Lis wrapped around every 5 thumbs, initiate new cycle    
        $('#homecycle-carousel').cycle({
            easing: 'easeOutSine',
            prev: '#btn-homecycle-prev',
            next: '#btn-homecycle-next',
            slideExpr: 'li',
            activePagerClass:'active',
            timeout:0,
            speed: 500,
            fx: 'scrollHorz'
        });
        //Artifically activate new thumb 
        $('#homecycle-carousel li a').click(function(){
        if(!$(this).hasClass('active')){
            $('#homecycle-carousel li a').not(this).removeClass('active').children('img').fadeTo(200,.5);
            $(this).addClass('active').children('img').fadeTo(200,1);
        }
        });

}