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

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