Question

To keep it brief, I'm trying to select #small-cycle1, #small-cycle2, etc. for the jquery cycle plugin. Using wild cards to select it does not seem to be working, as it writes out the pager nav of ALL cycles into each cycle.

Below is how I'm getting around the problem for now.

        $('#small-cycle1').cycle({ 
            speed:       0, 
            timeout:     0,
            pager:      '#nav1',
            pagerEvent: 'mouseover', 
            pauseOnPagerHover: true
        });
        $('#small-cycle2').cycle({ 
            speed:       0, 
            timeout:     0,
            pager:      '#nav2',
            pagerEvent: 'mouseover', 
            pauseOnPagerHover: true
        });
        $('#small-cycle3').cycle({ 
            speed:       0, 
            timeout:     0,
            pager:      '#nav3',
            pagerEvent: 'mouseover', 
            pauseOnPagerHover: true
        });
        $('#small-cycle4').cycle({ 
            speed:       0, 
            timeout:     0,
            pager:      '#nav4',
            pagerEvent: 'mouseover', 
            pauseOnPagerHover: true
        });
        $('#small-cycle5').cycle({ 
            speed:       0, 
            timeout:     0,
            pager:      '#nav5',
            pagerEvent: 'mouseover', 
            pauseOnPagerHover: true
        });

Is it possible to use wildcards in the selector and for the pager: option?

Was it helpful?

Solution

I'm not familiar with the cycle plugin but this code should select all the elements you want. Just set 'cycleCount' to the number of slideshows you have on the page and it will loop through them.

var cycleCount = 5;
for(var i = 1; i <= cycleCount;i++){
    $('#small-cycle'+i).cycle({ 
        speed:       0, 
        timeout:     0,
        pager:      '#nav'+i,
        pagerEvent: 'mouseover', 
        pauseOnPagerHover: true
    });
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top