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">&gt;</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?!

Reply via email to