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

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

If you have your jcarousel rotating automatically you need to attach the Cufon.Refresh() to an animation function.

For our carousel we used the 'itemVisibleOutCallback' parameter on jcarousel and attached the Cufon.Refresh() to the 'onAfterAnimation' call.

Here's an example:

jQuery('#myCarousel').jcarousel({
        scroll: 1,
        wrap: 'circular',
        animation: 1500,
        auto: 7,
        itemVisibleOutCallback: {
            onBeforeAnimation: carouselAnimateStart
        }
    });

function carouselAnimateStart(){
    Cufon.refresh();
}

Alex

I ran into this problem with a variation of coda-slider. What seemed to work for me, instead of using

visibility:hidden

I used

display:none

and

display:block 

to reveal.

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 :)

In jCarousel lite I use the following code:

beforeStart: function() {

    Cufon.refresh();

},
afterEnd: function() {

    Cufon.refresh();            

}

Seems to work a treat now - but I have as yet, only tested in Firefox on a Mac. Thanks for your post though. It helped me out and I hope this helps someone else out.

Cheers, Michael.

Alex had a good Idea but You cant refresh your all cufon objects at every itemVisibleOutCallback. What this will give You is a slooooowdown.

Think again, when you click "next" button and Cufon refreshed every single element that has transformed on page load - then some browsers might have problem with that.

So the proper solution is to replace specific elements only, you can do it like this:

$("#carousel").jcarousel({
    itemVisibleOutCallback: {
        onBeforeAnimation: function() {
            Cufon.replace("#carousel h2, #carousel li > div > a", {fontFamily: 'YourFont', hover: true});
        }
    }
});