0

我的网页上有一个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内的图像同时刷新。我怎样才能做到这一点？

4

3 回答 3

2

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

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

在我看来，这比使用 click 事件处理程序更好。

于 2012-08-10T12:07:14.113 回答
0

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

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

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

（通过这种方式，您将 fancybox 绑定到带有id="backscatter-link"AND 的元素到所有带有 的元素class="fancybox"）

其次，如果你用fancybox v2.x重新加载网页上的图像（并改变它的href属性）你不必做任何事情，因为它总是会打开相应的图像（v2.x使用该.live()方法）

第三，如果fancybox已经打开并且网页中的图片被刷新（它的href属性也发生了变化）并且你想让fancybox相应地刷新它的内容，那么你需要在你的reloadBackscatterImage()函数中添加一个监听器来评估fancybox的状态并触发aclick到#backscatter-link选择器，它将使用href此类选择器的当前打开fancybox ...像这样：

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

为了让这个解释更清楚，我创建了一个DEMO HERE，它每 10 秒刷新一次网页中的图像（我还添加了一个 fancybox 状态指示器。）当您单击它时，Fancybox 将始终打开页面上的当前图像并刷新其内容因此。

注意：这是为 fancybox v2.0.6+

于 2012-07-20T19:26:49.727 回答
0

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

我解决了使用两个 Fancybox href 到同一个图像 - 同一个组（rel = “something”），将自动播放设置为 true 并将幻灯片超时设置为所需的刷新间隔。完美运行。

它会开始播放 2 个（虚拟）图像的幻灯片，它一次又一次地指向同一个网络摄像头源图像。

于 2013-07-14T21:59:03.890 回答