fancybox 2图像刷新

fancybox 2 image refresh

本文关键字：刷新 图像 fancybox      更新时间：2023-12-01

我的网页上有一个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个（虚拟）图像组成的幻灯片，这些图像一次又一次地指向同一个网络摄像头源图像。

相关文章：