[jQuery] jQuery Cycle Plugin - how to construct pagerAnchorBuilder relative to object being cycled

[jQuery] jQuery Cycle Plugin - how to construct pagerAnchorBuilder relative to object being cycled


I have several sections on a page that have the same structure, a div
with information to cycle and a div with navigation. Each section has
the same classes and mark up, but varies with actual content.
What follows isn't exact, but similar markup:
<div class="section">
<div class="verticalList"> <ul>...</ul></div>
<div class="serviceRight"> <img /> <img /> <img /> </div>
</div>
<div class="section">
<div class="verticalList"> <ul>...</ul></div>
<div class="serviceRight"> <img /> <img /> <img /> </div>
</div>
I want to loop through each section and apply the same cycle pattern
via the jQuery cycle plugin. My code is as such:
$('.serviceRight').each(function() {
$(this).cycle({
fx: 'scrollHorz',
speed: 400,
timeout: 0,
pager: $(this).parent().find('.verticalList'),
pagerAnchorBuilder: function(idx, slide) {
// return sel string for existing anchor
//return $(this).parent().find('.verticalList
li:eq(' + idx + ') a');
return this.pager.find('.verticalList li:eq('
+ (idx) + ') a');
}
});
I'm having trouble constructing the pagerAnchorBuilder such that it's
relative to the section being cycled. I'm trying to keep the markup
for the section generic.
Any thoughts? Thanks.