Rebobinage jQuery qtip tooltip sur les images dans bxcarousel

Question

J'utilise bxcarousel pour montrer un tas d'images. Chaque image a une info-bulle, que j'affiche en utilisant qtip.

Cela fonctionne bien pour le premier tour, mais quand les images viennent autour d'une seconde fois les info-bulles ne montre pas plus (parce que bxcarousel supprime un élément qui glisse et le remet à la fin)

Une exemple du carrousel se trouve ici: (peut-être besoin d'une fonction « live » quelque part) http://www.kipdola.be/carousel/carousel.html

C'est le code utilisé pour lier les événements

// Create the tooltips only on document load 
$(document).ready(function() 
{ 
    // Use the each() method to gain access to each elements attributes 
    $('#shopcarousel a[rel]').each(function() 
    { 
     $(this).qtip(

Answer 1

J'ai fini par modifier bxCarousel dans un but similaire. Voici mes étapes:

1.) Ajoutez une autre propriété (animation_cb ou callback) à l'objet par défaut. Cette propriété doit être utilisé pour transmettre une fonction de rappel, à exécuter à la fin de la queue de chaque cycle d'animation:

var defaults = { 
    ... 
    controls: true, 
    animation_cb: null 
}; 

2.) Ajouter un chèque de l'option aux fonctions de slide_next et slide_prev:

function slide_next(){ 
    ... 
    get_a(); 
    if (typeof options.animation_cb === "function") options.animation_cb(); 
    is_working = false; 
    ... 
} 

Et:

function slide_prev(){ 
    ... 
    get_p() 
    if (typeof options.animation_cb === "function") options.animation_cb(); 
    is_working = false; 
    ... 
} 

3.) Enfin, dans votre appel d'initialisation du plug-in, passer une fonction de rappel à exécuter. Par exemple:

function doBar() { 
    // whatever you need to happen after the slides have moved 
    // like rebinding events, or what have you 
} 

$('ul.foo').bxCarousel({ 
    ... 
    animation_cb: doBar 
}); 

Answer 2

Qtip ne fonctionne pas bien avec .live() événements ... J'ai essayé quelque chose comme ceci:

$('#shopcarousel a[rel]').live('mouseover', function(){... }) 

mais il n'a pas bien fonctionné parce que parfois vous devez déplacer hors de l'élément puis de nouveau pour l'info-bulle à afficher.

Une meilleure solution consisterait à utiliser une info-bulle qui se lie aux événements .live(). Je ne pouvais pas trouver beaucoup, et ils sont encore relativement basique:

1. Simple Tooltip (tutoriel pour faire votre propre)
2. Tipsy (Je ne sais pas si cela est configuré pour charger le contenu en utilisant Ajax)
3. monnaTip (de cette SO answer)