.delegate в сочетании с fancybox

Question

У меня проблема с fancybox, который я хочу применить к изображениям в div, который динамически меняет свой контент с помощью .replaceWith. Код выглядит следующим образом:

$(document).load('fancybox', function() {
        $('.various4').fancybox({
                'width'             : 800,
                'height'            : 750,
                'autoScale'         : false,
                'transitionIn'      : 'none',
                'transitionOut'     : 'none',
                'type'              : 'iframe'
            });
    });

Это относится к следующему HTML:

<a class="various4" href="http://www.glimmann.ch/kasri/index.html"><img height="400" width="600" src="bg.jpg"  class="hoverbild" /></a>

Поскольку я использую функцию наведения с jquery и меняю содержимое div, я использовал следующий код для обеспечения эффекта hover, работающего после изменения содержимого div:

$(document).delegate('.hoverbild', 'hover', function(){
    $(".hoverbild").hover(function() {
        $(this).attr("src","bg-hover.jpg");
            }, function() {
        $(this).attr("src","bg.jpg");
    });
});

Это работает без проблем. Но теперь, если вы хотите передать fancybox-часть делегату, это не сработает вообще. Нет предупреждения об ошибке, оно просто игнорируется.

    $(document).delegate('.various4', 'fancybox', function(){
        $('.various4').fancybox({
                    'width'             : 800,
                    'height'            : 750,
                    'autoScale'         : false,
                    'transitionIn'      : 'none',
                    'transitionOut'     : 'none',
                    'type'              : 'iframe'
                });
        });   

Чего мне не хватает? Вместо этого я попытался использовать .live, но это не имеет значения.

Заранее благодарю за помощь.

PS: Вы можете найти все (не) работающее здесь: www.glimmann.ch. Просто переключайтесь между ссылками вверху фотографии.

Answer 1

$('selector').fancybox() связывает открытие окна как обработчик кликов, если вы хотите открыть fancybox вручную, используйте $.fancybox()

$(document).delegate('.various4', 'click', function() {
    $.fancybox({href: $(this).attr('href')});
    return false;
});

Это будет работать для встроенного iframe, если вы хотите открыть изображение, используйте:

$(document).delegate('.various4', 'click', function() {
    $.fancybox($(this).attr('href'), {type:'image'});
return false;
});

Answer 2

Второй параметр функции delegate() и первый параметр функции live() указывают, к какому типу события нужно привязать функцию.'fancybox' не является событием, и поэтому оно игнорируется.

Вы можете сделать следующее,

$('.various4').live('hover', function() {
  $(this).fancybox();
});

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

В качестве альтернативы вы можете создать собственное событие и вызывать его для каждого изображения, которое создается после запуска replaceWith().

После replaceWith() просто сделайте что-то вроде

$('.various4').trigger('apply_fancybox');

И затем,

$('.various4').live('apply_fancybox', function() {
  $(this).fancybox();
});

Вам, вероятно, нужно будет запустить это событие для любых начальных изображений, которые не создаются динамически сreplaceWith().

И еще один способ сделать это, самый простой из всех, почему бы просто не использовать $('.various4').fancybox() после вызова replaceWith()?