JCarousel et Cufon ne coopèrent pas: l'animation fait disparaître cufon

Question

J'utilise cufon avec jCousel. Le carrousel comporte cinq éléments et pivote de droite à gauche. En d'autres termes, ils sortent de l'écran vers la gauche. Tu peux le voir ici.

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

Si je laisse le carrousel sur le comportement par défaut, il arrive à la 5ème diapositive et puis glisse vers la droite rapide, et tout affiche correctement.

Si je place le carrousel sur 'circulaire', les titres de cufon disparaissent après la première rotation; c'est-à-dire qu'ils ne viennent pas avec le reste de la diapositive lorsque la première diapositive est ajoutée à la droite de la dernière diapositive. Savez-vous ce que je peux faire pour que jCarousel et Cufon coopèrent ou communiquent afin que les titres ne disparaissent pas dans cette situation?

TTFN Travis

Answer 1

Ce que je fini par faire était carrousel chaque fois déplacé à l'élément suivant, j'ai appelé la fonction Cufon.replace pour qu'il re-rend le CUFON pour le texte pertinent.

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'); 
    }); 
}); 

Cependant, j'ai mon propre problème avec jCarousel dans IE où il semble doubler d'écrire le CUFON sur les articles de carrousel cachés où j'utiliser le code ci-dessus jQuery ou non. Si quelqu'un rencontre et corrige ce problème, il serait très utile. Si je trouve la solution à l'avance, je vais poster ici :)

Answer 2

J'ai rencontré ce problème avec une variation de coda-slider. Ce qui semblait fonctionner pour moi, au lieu d'utiliser

visibility:hidden 

I utilisé

display:none 

et

display:block 

pour révéler.

Answer 3

Si votre jousousel tourne automatiquement, vous devez associer Cufon.Refresh() à une fonction d'animation.

Pour notre carrousel, nous avons utilisé le paramètre 'itemVisibleOutCallback' sur jcarousel et joint le Cufon.Refresh() à l'appel 'onAfterAnimation'.

Voici un exemple:

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

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

Alex

Answer 4

En jCarousel Lite J'utilise le code suivant:

beforeStart: function() { 

    Cufon.refresh(); 

}, 
afterEnd: function() { 

    Cufon.refresh();    

} 

Semble travailler un régal maintenant - mais je dois encore , seulement testé dans Firefox sur un Mac. Merci pour votre message si. Cela m'a aidé et j'espère que cela aidera quelqu'un d'autre.

Cheers, Michael.

Answer 5

Alex avait une bonne idée mais vous ne pouvez pas actualiser tous vos objets cufon à chaque itemVisibleOutCallback. Ce que cela vous donnera est un slooooowdown. Réfléchissez encore, lorsque vous cliquez sur le bouton "Suivant" et que Cufon actualise tous les éléments qui se sont transformés lors du chargement de la page, certains navigateurs peuvent avoir des problèmes avec cela.

Donc la bonne solution est de remplacer certains éléments seulement, vous pouvez le faire comme ceci:

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