Перепривязка всплывающей подсказки jQuery qtip к изображениям в bxcarousel

Я использую bxcarousel, чтобы показать кучу изображений. Каждое изображение имеет всплывающую подсказку, которую я отображаю с помощью qtip.

Это хорошо работает для первого раунда, но когда изображения появляются во второй раз, всплывающие подсказки больше не отображаются (потому что bxcarousel удаляет элемент, который выдвигается, и возвращает его в конце)

Пример карусели можно найти здесь: http://www.kipdola.be/carousel/carousel.html

Это код, используемый для привязки событий (может, где-то нужна "живая" функция?)

// 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(
Источник

2 ответа

Решение

В итоге я модифицировал bxCarousel для аналогичной цели. Вот мои шаги:

1.) Добавьте другое свойство (animation_cb или callback) к объекту по умолчанию. Это свойство должно использоваться для передачи функции обратного вызова, которая должна выполняться в конце каждого цикла анимации:

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

2.) Добавьте проверку для опции в функции slide_next и slide_prev:

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

А также:

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

3.) Наконец, при вызове инициализации вашего плагина передайте функцию обратного вызова для выполнения. Например:

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
});
Источник

qTip плохо работает с .live() События... Я попробовал что-то вроде этого:

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

но это не сработало, потому что иногда вам приходилось уходить от элемента, а затем назад, чтобы всплыла подсказка.

Лучшей альтернативой будет использование всплывающей подсказки, которая связывает .live() События. Я не мог найти много, и они все еще относительно просты:

  1. Простая подсказка (учебник, чтобы сделать свой собственный)
  2. Подсказка (я не уверен, настроен ли он для загрузки контента с помощью Ajax)
  3. monnaTip (из этого ТАКОГО ответа)
Источник
Другие вопросы по тегам