Перепривязка всплывающей подсказки jQuery qtip к изображениям в bxcarousel - PullRequest
0 голосов
/ 05 мая 2010

Я использую 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 ]

1 голос
/ 14 июля 2010

В итоге я модифицировал 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
});
0 голосов
/ 07 мая 2010

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

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

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

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

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