fancybox 2 이미지 새로 고침

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는 현재에 의해 시작됩니다 : 나는 또한 같은에서 새로 고치려면 fancybox 내부의 이미지가 필요

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

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

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

시각. 어떻게 이것을 달성 할 수 있습니까?

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 

둘째 (당신이 id="backscatter-link"와 AND class="fancybox" 모든 요소 요소에 fancybox를 결합하는 이러한 방법)

같은 fancybox v2.x에서 웹 페이지의 이미지를 다시로드하고 (해당 파일의 href 속성을 변경하는 경우) 항상 공동 작업을 수행하므로 아무 것도 할 필요가 없습니다 fancybox 이미 개방되고, 웹 페이지의 이미지가 갱신되는 경우

셋째, (그 href 속성도 변경) 및 그에 따라 컨텐츠를 새로 fancybox를 원하는 (버전 2.x는 .live() 방법을 사용) 이미지를 rresponding,

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

: 당신은 fancybox의 상태를 평가하고 그러한 선택의 현재 href 사용 fancybox 열립니다 #backscatter-link 선택기에 click ... 이런 식으로 뭔가를 트리거하기 위해 reloadBackscatterImage() 함수 내에서 리스너를 추가해야

이것을 만들려면 ex 평면도가 명확 해졌습니다. 웹 페이지의 이미지를 10 초마다 새로 고치는 DEMO HERE을 만듭니다 (팬시 박스 상태 표시기도 추가했습니다.) 팬시 박스는 클릭 할 때 페이지의 현재 이미지를 항상 열어 그에 따라 내용을 새로 고칩니다.

참고 :이은 fancybox의 v2.0.6입니다 +

Answer 3

웹캠에서 Fancybox로 이미지를 전달하는 것과 같은 문제를 해결하려고했습니다.

동일한 이미지 (동일한 "rel ="something ")에 두 개의 Fancybox href를 사용하여 autoplay를 true로 설정하고 slidehow timeout을 원하는 새로 고침 간격으로 설정했습니다. 완벽하게 작동합니다.

동일한 웹캠 소스 이미지를 가리키는 2 개의 (가상) 이미지 슬라이드 쇼가 시작됩니다.