Question

我的网页上有一个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内的图像同时刷新。我怎么能实现这个目标呢？

Answer 1

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

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

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

Answer 2

首先，您的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的状态并触发click到#backscatter-link选择器，这将使用此类选择器的当前href打开fancybox ......这样的事情：

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

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

注意：这适用于fancybox v2.0.6 +

Answer 3

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

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

它开始幻灯片显示2个（虚拟）图像再次运行并再次指向相同的网络摄像头源图像。

fancybox 2图像刷新

3 个答案: