Rebinding jQuery qtip tooltip on images in bxcarousel

Question

I'm using bxcarousel to show a bunch of images. Each image has a tooltip, which I display using qtip.

This works fine for the first round, but when the images come round a second time the tooltips don't show anymore (because bxcarousel removes an element that slides out and puts it back at the end)

An example of the carousel can be found here: http://www.kipdola.be/carousel/carousel.html

This is the code used to bind the events (maybe it needs a "live" function somewhere?)

// 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

qTip doesn't work well with .live() events... I tried something like this:

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

but it didn't work well because at times you would have to move off of the element then back for the tooltip to show.

A better alternative would be to use a tooltip that binds with .live() events. I couldn't find many, and they are still relatively basic:

1. Simple Tooltip (tutorial to make your own)
2. Tipsy (I'm not sure if this is set up to load content using Ajax)
3. monnaTip (from this SO answer)

Answer 2

I ended up modifying bxCarousel for a similar purpose. Here are my steps:

1.) Add another property (animation_cb, or callback) to the defaults object. This property should be used to pass a callback function, to be executed at the tail end of each animation cycle:

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

2.) Add a check for the option to the slide_next and slide_prev functions:

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

And:

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

3.) Finally, in your plugin initialization call, pass a callback function to be executed. For example:

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