Categories

Tag Cloud

50mm blaire bowen burntstick cat causeway django dreamhost facebook favorite flash flex flood fluxbox fossils hdr james linux marye nelson olympus python signs skye soup sundre sunset svn ubuntu work

Random Images

Young grasshoppa bionic Random plant A dead rodent Stairs on the farm Causeway Wait, do that again! bug Raven flood 2 Tom

Content tagged with "jquery"

jQuery, jCarousel, circular wrap and auto scroll Post on Oct 06, 2010

I recently needed a carousel for a site and decided to go with jCarousel, as it seemed to have the most flexibility in terms of what I was looking for. Only one problem though: I wanted to have both 'circular' wrap mode and auto scrolling enabled for my carousel, and as several people have reported, it doesn't seem to work.

The solution

Turns out the fix really wasn't that hard. Even with 'wrap' mode set to 'circular' on auto scroll, the carousel would still tell itself to shut down when it reached the end of the line of images. Probably a bug, but no biggie.

Just listen for the onAfterAnimation event and fire it back up: 

    // our event listener receives the carousel
    // object, so we just check to see if it's 
    // turned itself off or not...
    function afterAnimation(carousel){
        if(carousel.autoStopped){
            carousel.startAuto()
        }
    }
  
    jQuery(document).ready(function(){
        var options = {
            auto: 2.5,
            scroll:1,
            wrap: 'last', // with this solution, wrap doesn't matter any more
            // itemLastInCallBack fires when a new 'last' image
            // shows up
            itemLastInCallback:{
                onAfterAnimation: afterAnimation
                }
        }
        jQuery('.carousel').jcarousel(options);
    })

That's it!

Happy trails

Aaron

tags javascript jcarousel jquery