Well I figured it out
[code]
$(document).ready(function(){
$('.rotator').each(function(){
$(this).after('<div class="rotatorcontrol"></div>');
$(this).cycle({
fx: 'turnDown',
speed: 'fast',
timeout: 0,
pager:$(this).next()
});
});
});
[/code]
[html]
<div class="rotator">
<img src="images/penguin.jpg" width="200" height="200" />
<img src="images/lock.gif" width="200" height="200" />
<img src="images/ecoimpact.jpg" width="200" height="200" />
</div> <div id="foo" name="bar"></div>
<div class="rotator">
<img src="images/penguin.jpg" width="200" height="200" />
<img src="images/lock.gif" width="200" height="200" />
<img src="images/ecoimpact.jpg" width="200" height="200" />
</div>
[/html]
hope this helps ohters
Mike
On Apr 2, 2:50 pm, Mean Mike <mcgra...@gmail.com> wrote:
> Hello all
>
> I am trying to work with the cycle plugin and I'm having a bit of a
> problem (what's new?) here is the scenario . I have multiple groups of
> images that I want to cycle but I don't want to target them by id I
> would rather target them by class however I also would like to use
> paging. so I tried this
>
> [code]
> $(document).ready(function(){
> $('.pics')
> .after('<div id="nav>')
> .cycle({
> fx: 'turnDown',
> speed: 'fast',
> timeout: 0,
> pager: ".next()" //this does not work
> //pager: '#nav'
> });
> });
> [/code]
>
> [html]
> <div class="pics">
> <img src="images/penguin.jpg" width="200" height="200" />
> <img src="images/lock.gif" width="200" height="200" />
> <img src="images/ecoimpact.jpg" width="200" height="200" />
> </div>
> <div id="test"></div>
>
> <div class="pics">
> <img src="images/penguin.jpg" width="200" height="200" />
> <img src="images/lock.gif" width="200" height="200" />
> <img src="images/ecoimpact.jpg" width="200" height="200" />
> </div>
> [/html]
>
> Does anyone know what I'm doing wrong ?
>
> any help would be greatly appreciated
>
> thanks
> Mike
