fancybox 2图像刷新

我的网页上有一个fancybox 2，它显示了一个自动从网络摄像头以完整尺寸生成的图像。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内的图像也同时刷新时间。我该如何实现这个目标？

来源

2012-07-20 Robin

你的意思是说，如果fancybox被打开，它应该刷新里面的图像？或者如果链接（'href'）被刷新，那么fancybox应该打开正确的图像？ – JFK 2012-07-20 17:43:51

我发现以下刷新图像而无需关闭并重新打开的fancybox：

 if ($.fancybox.isOpened) { 
     $(".fancybox-inner").find("img").attr('src', src + "?time=" + timestamp); 
    }

这在我看来比工作更好使用点击事件处理程序。

来源

2012-08-10 12:07:14 Robin

哈克，但工程。 – WhyNotHugo 2012-08-10 14:55:23

首先，你的fancybox初始化应该是里面的$(document).ready()像

$(document).ready(function() { 
    $(".fancybox").fancybox(); 

    $("#backscatter-link").fancybox({ 
     openEffect: 'elastic', 
     closeEffect: 'elastic', 
     helpers: { 
      title: { 
       type: 'inside' 
      } 
     } 
    }); // fancybox 
}); // ready

（这样你用id="backscatter-link"并与class="fancybox"所有元素结合的fancybox的元素）

二，如果您使用fancybox v2.x重新加载网页上的图像（并更改它的href属性），则您不必执行任何操作，因为它总是会打开公司rresponding图像（V2.X使用.live()法）

三，如果的fancybox已经打开，并在网页上的图像进行刷新（其href属性也发生了变化），你想要的fancybox相应地更新其内容，那么你需要你的reloadBackscatterImage()函数中添加一个侦听器，以评估的fancybox的状态，并触发click到#backscatter-link选择，这将打开的fancybox使用这种选择器的当前href ...是这样的：

if($.fancybox.isOpened){ 
    $("#backscatter-link").trigger("click"); 
}

为了使这个前夷平更清晰创建一个DEMO HERE享受清新的图像INT网页每10秒（我还添加了的fancybox状态指示灯。）当你点击它，并相应地更新其内容的fancybox总会打开页面上的当前图像。

注意：这是对的fancybox v2.0.6 +

来源

2012-07-20 19:26:49 JFK

感谢您的回答，这确实会刷新图片，但我不喜欢它关闭并重新打开fancybox的方式。其原因是，没有办法确定图像是否真的发生了变化，并且看起来对用户不利。有没有什么方法可以在没有fancybox关闭和重新打开的情况下更换图片？ – Robin 2012-07-30 12:07:21

除非你通过'iframe'类型打开一个外部页面，并且在内部执行它，否则没有办法按照你想要的方式来完成它。 – JFK 2012-07-30 21:16:07

我试图解决同样的问题 - 将网络摄像头的图像转发到Fancybox。

我解决了使用两个的fancybox HREF对相同的图像 - 相同的基团（相对=“东西”），设置自动播放为true和幻灯片超时到所需的刷新间隔。完美的作品。

它开始幻灯片显示2个（虚拟）图像一遍又一遍地运行，指向同一个摄像头源图像。

来源

2013-07-14 21:59:03

fancybox 2图像刷新

回答

相关问题