Geek Answers Handbook

JCarousel and Cufon do not cooperate: animation makes cufon leave

I am using cufon with jCarousel.

The carousel has five objects in it and turns from right to left - they go from the screen to the left, in other words. You can see it here.

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

If I leave the carousel by default, it falls on the fifth slide, and then quickly returns to the right, and everything displays correctly.

If I set the carousel to “circular,” the cufon headers will disappear after the first turn; that is, they do not come with the rest of the slide when the first slide is added to the right of the last slide.

Do you know what I can do to get jCarousel and Cufon to collaborate or communicate so that the headers in this situation do not disappear?

TTFN Travis

+3
source share
5 answers

What I did was every time the carousel went to the next element, I called the Cufon.replace function to redisplay cufon for the corresponding text.

those.

$(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 there seems to be a double cufon entry on hidden carousel elements, where I use the above jQuery code or not. If anyone encounters and fixes this problem, it will be very helpful. If I find a fix in advance, I will post here :)

0
source

If you automatically rotate in jcarousel, you need to attach the Cufon.Refresh () function to the animation function.

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

Here is an example:

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

Alex

+2
source

I ran into this problem with a variation of the encoder slider. Which seemed to work for me, instead of using

 visibility:hidden

I used

 display:none

and

 display:block

.

+1
source

In jCarousel lite I use the following code:

 beforeStart: function() { Cufon.refresh(); }, afterEnd: function() { Cufon.refresh(); }

It seems that now it is necessary to treat pleasure, but so far I have tested it only in Firefox on Mac. Thanks for your post. It helped me, and I hope it helps someone else.

Cheers, Michael.

0
source

Alex had a good idea, but you cannot update all cufon objects on every VisibleOutCallback element. What this will give you is slooooowdown.

Think again when you click the “Next” button, and Cufon updates every element that converts when the page loads - then some browsers may have a problem with this.

So, the correct solution is to replace only certain elements, you can do it as follows:

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

More articles:


All Articles