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.

Reply via email to