About design and nearby

Using Cufón.js with jCarousel (How to Fix)

Posted: July 2nd, 2011 | Author: | Filed under: Tips and Tricks | Tags: , , , | 2 Comments »

Using Cufón with jQuery jCarousel, I get a bug: after the first rotation my texts (powered by Cufon javascript) disappear – and the rest of slide is shown. The Carousel has three items and rotates them circularly. I find the way to fix it via refreshing Cufón:

  1. function carouselAnimateStart()
  2.             {
  3.                 Cufon.refresh();
  4.             }


  1. jQuery(document).ready(function () {
  2.                 jQuery('#mycarousel').jcarousel({
  3.                     auto: 3,
  4.                     scroll: 1,
  5.                     wrap: 'circular',
  6.                     initCallback: mycarousel_initCallback,
  7.                     itemVisibleOutCallback:
  8.                     {
  9.                         onBeforeAnimation: carouselAnimateStart
  10.                     }
  11.                 });

Note: using such fix leaks the memory (because your script is refreshed every time).

Live example: check the example >>

Related post: Using Non-standard Fonts with Cufón.js
Related post: Cufón.js and Hover Effect

Share Button

Check Related Posts:

2 Comments on “Using Cufón.js with jCarousel (How to Fix)”

  1. 1 it seems the fix not work in IE right? said at 12:23 pm on September 13th, 2011:
    Reply  |  Quote

    it seems the fix not work in IE right? Any fix or suggestion?

  2. 2 admin said at 6:33 pm on January 6th, 2012:
    Reply  |  Quote

    @ it seems the fix not work in IE right?:
    No, it works for IE as well. I just see a weak point in this method as memory leaks – please see the note.

Leave a Reply

  • 8 − = four

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now