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圖像刷新

回答

相關問題