0

ウェブカメラから自動的に生成された画像をフルサイズで表示するファンシーボックス 2 がウェブページにあります。

次を使用して、Webページの画像を更新します。

    //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; 
}

ファンシーボックスは現在、次の方法で開始されています。

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

   $("#backscatter-link").fancybox({
       openEffect: 'elastic',
       closeEffect: 'elastic',

       helpers: {
           title: {
               type: 'inside'
           }
       }
   });

ファンシーボックス内の画像も同時に更新する必要があります。どうすればこれを達成できますか？

4

3 に答える 3

2

以下は、fancyboxを閉じたり、再度開いたりせずに画像を更新することを発見しました。

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

私の意見では、これはクリックイベントハンドラーを使用するよりもうまく機能します。

于 2012-08-10T12:07:14.113 に答える
0

私は同じ問題を解決しようとしていました-ウェブカメラからFancyboxに画像を転送します。

2 つの Fancybox href を同じ画像 - 同じグループ (rel = "something") に使用し、自動再生を true に設定し、スライドショーのタイムアウトを目的の更新間隔に設定することを解決しました。完璧に動作します。

2 つの (仮想) 画像のスライドショーを開始し、同じ Web カメラのソース画像を何度も指しています。

于 2013-07-14T21:59:03.890 に答える
0

まず、ファンシーボックスの初期化は次の$(document).ready()ようにする必要があります

$(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 を使用して Web ページ上の画像をリロード (およびそのhref属性を変更) すると、対応する画像が常に開かれるため、何もする必要はありません (v2.x は.live()メソッドを使用します) 。

第 3に、fancybox が既に開かれており、Web ページの画像が更新されている (そのhref属性も変更されている) 場合に、fancybox のコンテンツをそれに応じて更新したい場合はreloadBackscatterImage()、fancybox のステータスを評価してトリガーするために、関数内にリスナーを追加する必要があります。そのようclickなセレクター#backscatter-linkの現在を使用してfancyboxを開きhrefます...次のようなもの：

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

この説明をより明確にするために、 10 秒ごとに Web ページの画像を更新するDEMO HEREを作成します(Fancybox ステータス インジケーターも追加しました)。Fancybox は、クリックするとページ上の現在の画像を常に開き、そのコンテンツを更新します。によると。

注：これはfancybox v2.0.6+用です

于 2012-07-20T19:26:49.727 に答える