JQuery - Getting cycle prev/next to trigger jcarousel prev/next

Question

I have Cycle running a slideshow, which has prev/next graphics appear when the slideshow is hovered on. The cycle also has a vertical thumbnail pager. I wrapped the pager in a customised version of jCarousellite which puts an .activeSlide class on the active thumbnail and has it's own set of prev/next links.

All in all it's working pretty well and can be seen here:

http://www.spiritlevel.co.uk/cycletest/cycle_test.html

However, I have one last hurdle...

When the prev/next graphics on the slideshow are clicked, I want to check if the newly .activeSlide is visible in the carousel and if not, make it so... and I could really do with some help.

To give an example, when you click on my link above you will see there are 8 thumbnails visible in the carousel. Thumbnail 1 is active. If I click on the next graphic on the slideshow, thumbnail 2 becomes active. click again and thumbnail 3 becomes active etc. All well and good until I click for the 8th time and thumbnail 9 becomes active - problem then is that thumbnail 9 is not visible in the carousel - and so at this point I would like some code to activate that would trigger the carousel and make thumbnail 9 visible. (triggering the next link on the carousel would work in this instance)

The solution also needs to deal with a situation like the page loading and the user immediately clicking the prev graphic on the slideshow - which shows the last slide. Triggering the prev link on the carousel would not work here - rather the next link would have to be triggered multiple times to make the active thumbnail visible.

I hope I have been clear - it's actually quite hard to explain what I want to happen but I think it will be pretty obvious when you click on my link above - easier to see than to describe!

I would really like to get this last bit working and would appreciate any help you can give.

thanks

powerbuoy powerbuoy · Accepted Answer · 2012-02-21T14:10:13

Maybe...

// When clicking the cycle arrows
$('#slidecontrol a').click(function () {
    var activeSlide = $('div.jcarousellite li.activeSlide');

    // If the "activeSlide" in the jcarousel is not already visible
    if (!activeSlide.is(':visible')) {
        // If there are items ABOVE the active slide that are visible we need to go down
        if (activeSlide.prevAll('li:visible').length) {
            var clicker = $('div.nextlite').find('a');
        }
        // Else we need to go up
        else {
            var clicker = $('div.prevlite').find('a');
        }

        // Keep clicking untill it's visible
        while (!activeSlide.is(':visible')) {
            clicker.click();
        }
    }
});

JQuery - Getting cycle prev/next to trigger jcarousel prev/next

1 Answers