我的网页上有一个fancybox 2,它显示了一个由网络摄像头自动生成的全尺寸图像。
我使用以下方法刷新网页上的图像:
//reload the images so they are always current
$(document).ready(function () {
setInterval('reloadBackscatterImage()', 60000); // 60 seconds
});
function reloadBackscatterImage() {
var src = $('#backscatter-img').attr('src');
// check for existing ? and remove if found
var queryPos = src.indexOf('?');
if (queryPos != -1) {
src = src.substring(0, queryPos);
}
//generate a timestamp so we always get the latest image (break browser cache)
var timestamp = new Date().getTime();
$('#backscatter-img').attr('src', src + "?time=" + timestamp);
$('#backscatter-link').attr('href', src + "?time=" + timestamp);
return false;
}
fancybox目前由发起
$(document).ready(function () {
$(".fancybox").fancybox();
});
$("#backscatter-link").fancybox({
openEffect: 'elastic',
closeEffect: 'elastic',
helpers: {
title: {
type: 'inside'
}
}
});
我需要fancybox中的图像同时刷新。我怎样才能做到这一点?
我发现以下内容在不关闭和重新打开fancybox的情况下刷新了图像:
if ($.fancybox.isOpened) {
$(".fancybox-inner").find("img").attr('src', src + "?time=" + timestamp);
}
在我看来,这比使用点击事件处理程序效果更好。
首先,您的fancybox初始化应该在类似的$(document).ready()
中
$(document).ready(function () {
$(".fancybox").fancybox();
$("#backscatter-link").fancybox({
openEffect: 'elastic',
closeEffect: 'elastic',
helpers: {
title: {
type: 'inside'
}
}
}); // fancybox
}); // ready
(通过这种方式,您将fancybox绑定到具有id="backscatter-link"
的元素,并绑定到所有具有class="fancybox"
的元素)
第二步,如果使用fancybox v2.x在网页上重新加载图像(并更改其href
属性),则无需执行任何操作,因为它将始终打开相应的图像(v2.x使用.live()
方法)
第三,如果fancybox已经打开,并且网页中的图像被刷新(其href
属性也发生了变化),并且您希望fancybox相应地刷新其内容,那么您需要在reloadBackscatterImage()
函数中添加一个侦听器来评估fancybox的状态,并向#backscatter-link
选择器触发click
,它将使用这种选择器的电流CCD_ 10打开风扇盒。。。像这样的东西:
if($.fancybox.isOpened){
$("#backscatter-link").trigger("click");
}
为了让这个解释更清楚,我创建了一个DEMO HERE,每10秒刷新一次网页中的图像(我还添加了一个fancybox状态指示器。)当你点击页面时,fancybox将始终打开页面上的当前图像,并相应地刷新其内容。
注意:这适用于fancybox v2.0.6+
我试图解决同样的问题-将图像从网络摄像头转发到Fancybox。
我解决了这个问题,使用两个Fancybox href对同一个图像-相同的组(rel="something"),将自动播放设置为true,并将幻灯片放映超时设置为所需的刷新间隔。工作非常完美。
它启动了一个由2个(虚拟)图像组成的幻灯片,这些图像一次又一次地指向同一个网络摄像头源图像。