与fancybox结合使用

如何解决与fancybox结合使用

我对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://xy//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,\'type\'              : \'iframe\'
                });
        });   

我想念什么？我尝试改用.live，但这没什么区别。 预先感谢您的帮助。     

解决方法

        

delegate()

函数的第二个参数和

live()

函数的第一个参数指定将函数绑定到哪种事件类型。

\'fancybox\'

不是事件，这就是为什么它被忽略。 您可以执行以下操作，

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

这应该起作用，因为在用户单击图像之前，他们必须将鼠标悬停在图像上，然后在该图像上调用“ 8”。 另外，您可以创建自己的事件并在运行

replaceWith()

之后在创建的每个图像上调用它。

replaceWith()

之后，只需做类似的事情，

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

然后有

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

对于未使用

replaceWith()

动态创建的任何初始图像，您可能需要触发此事件。 还有另一种最简单的方法，为什么不打电话给

replaceWith()

之后再使用

$(\'.various4\').fancybox()

呢？     ,        

$(\'selector\').fancybox()

绑定打开框作为单击处理程序，如果要手动打开fancybox，请使用

$.fancybox()

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

如果您要使用图片，则适用于内联iframe：

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