我对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,
'height' : 750,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
我想念的是什么?我尝试改用.live,但这没什么区别。
谢谢您的帮助。
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()
?
[$('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;
});