JCarousel and Cufon aren't co-operating: animation makes cufon go away

Question

I'm using cufon with jCarousel.

The Carousel has five items in it and rotates right to left -- they go off the screen to the left, in other words. You can see it here.

http://www.foursquare.org/site/test

If I leave the carousel on default behavior, it gets to the 5th slide and then slides back to the right fast, and everything displays properly.

If I set the carousel to 'circular', the cufon headlines disappear after the first rotation; i.e. they don't come with the rest of the slide when the first slide gets appended to the right of the last slide.

Do you know what I can do to get jCarousel and Cufon to co-operate or communicate so that the headlines don't disappear in this situation?

TTFN Travis

Answer 1

What I ended up doing was everytime carousel moved to the next item, I called the Cufon.replace function so that it re-renders the cufon for the relevant text.

I.E.

$(document).ready(function(){
  $j('.jcarousel-prev').click(function(e){
    Cufon.replace('li.jcarousel-item h3');
  });
  $j('.jcarousel-next').click(function(e){
    Cufon.replace('li.jcarousel-item h3');
  });
});

However, I have my own problem with jCarousel in IE where it seems to double write the cufon on hidden carousel items where I use the above jQuery code or not. If anyone comes across and fixes this issue, it would be very helpful. If I find the fix beforehand, I will post on here :)