[jQuery] jquery cycle plugin. paging multiple divs.
Hey there.
I got a problem with the jquery cycle plugin. I wanna have a div with
thumbnails in it. that cycle and also use the pager function od the
plugin. I also wanna have a div with the bigger images that also cycle
and should also be accesable with the same pager. When I click on the
thumbnail the div with the bigger image shows up and when I click on
the bigger image it fades out. the problem is, that when i click on a
number in the pager, the thumbs are cycling but the bigger images are
not. if I click on the nextbutton both divs are cycling. My question
is can I use the same pager for more than one div? if so, how can i
get it to work?
here's my jQuery:
$('#gastroThumbs').cycle({
fx: 'fade',
speed: 500,
timeout: 0,
next: '#next',
pager: '#thumbNav'
}),
$('#gastroBilder').cycle({
fx: 'fade',
speed: 500,
timeout: 0,
next: '#next',
pager: '#thumbNav'
});
$('#gastroThumbs a img').click(function(){
$('#gastroBilder').fadeIn('300');
$('#gastroThumbs a img').fadeOut('300');
});
$('#gastroBilder').click(function(){
$(this).fadeOut('300');
$('#gastroThumbs a img').fadeIn('300');
});
that's my html:
<div id="gastroThumbs">
<a href="#"><img src="img/gastro1.jpg" /></a>
<a href="#"><img src="img/gastro2.jpg" /></a>
<a href="#"><img src="img/gastro3.jpg" /></a>
<a href="#"><img src="img/gastro4.jpg" /></a>
<a href="#"><img src="img/gastro5.jpg" /></a>
</div>
<div id="nexter"><a href="#" id="next">></a></div>
<div id="thumbNav"></div>
<div id="gastroBilder">
<img src="img/gastro1_gross.jpg" />
<img src="img/gastro2_gross.jpg" />
<img src="img/gastro3_gross.jpg" />
<img src="img/gastro4_gross.jpg" />
<img src="img/gastro5_gross.jpg" />
</div><!-- end bilder -->
can anybody help, please?!