Question

I have a slide show component I’ve been working on that is a mash up of jcycle and jcarousel. It works rather well, yet there is one last feature I’d to add that I cannot figure out. Right now if you click on a thumbnail it will center it in the carousel as long as it’s not the first 2 or last 2 thumbs. This works great and I like centering the active thumbnail of the slide show.

The problem I’m running into is if the user hits the play button on the slide show or the next and previous slide buttons, the slide show cycles, yet the active slide thumbnail does not center in the carousel. I’ve tried unsuccessfully to check if the thumbnail anchor has class, activeSlide, and if so to center it, yet cant seem to get it to work.

Here is a link to the demo page I’ve been working on.

http://brettjankord.com/standards/slideshows/jslideshow-test2.php

Any help is greatly appreciated!

Answer 1

Put the following at the end of your onBefore method

 var carousel = $('#mycarousel').data('jcarousel');
 var activeIdx = $('#mycarousel img[src="'+next.src+'"]').closest('a').data('index') -2;
 if (carousel)
     {
         carousel.scroll(activeIdx);
     }

Demo at http://jsfiddle.net/JupPn/1/