问题描述
我对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;
});