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的内容，因此在更改div的内容后，我使用以下代码来提供悬停效果：

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

这没有问题。但现在，如果想告诉fancybox-part委托，它根本不起作用。没有错误警告，它只是被忽略了。

    $(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()？

.delegate与fancybox结合使用

2 个答案: