2016-08-18 3 views
0

나는 답을 직접 찾았지만 게시 중이므로 나는별로 운이 없었습니다. Fancybox가 다음 위치에서 발견되었습니다. http://fancyapps.com/fancybox/로드 후 Fancybox2 업데이트 제목

나는 사진 갤러리를 직접 만들고 있는데, 이것은 훌륭하게 작동합니다. 그러나, 나는 titlebox에 이미지 설명을 얻고 싶다. 내 이미지 설명은 다른 곳에 저장됩니다. (실제로 Flickr에서 설명을 가져 오지만 실제로는 관련성이 없습니다.) 맞아요. 각 이미지는 "id"라는 html5 데이터를 보유하고 있으며이 이미지는 flickr 이미지 ID에 연결됩니다. 내가 fancybox 열 전에, 나는 이렇게 모든이가하고있는

var sDescription; 

$(".fancybox").fancybox({ 
        beforeLoad: function() { 
         var id = this.element.data('id'); 
         var data = { 
          imgID: id 
         }; 
         //setupBlocks(); 
         loadData(data); 
        } 

function loadData(data) { 
        $.ajax({ 
         type: "POST", 
         url: "Ajax/getDescription.php" 
         , 
         data: data 
         , success: function (res) { 

          sDescription = res; 
         } 
        }); 
       } 

문자열로 퍼팅 후, 내 자신의 스크립트에 텍스트 만의 캐릭터를 보유하고 페이지를 ID를 전달하고있다.

afterLoad: function() { 

         this.title= this.element.data('title')+sDescription; 
        } 

는 이제 단순히 설명뿐만 아니라 타이틀을 유지하기 위해 제목을 업데이트하고 있습니다. 첫 번째 이미지를 열면 아약스 요청이 내려지며 텍스트를 다운로드하면 fancybox가 열리고 다음과 같이 제목이 표시됩니다. Megan 0014 "The Wanderer" left/right를 누르면 beforeLoad 콜백이 호출됨을 알 수 있습니다 ajax 요청이지만 fancybox를 닫거나 열지 않으면 텍스트가 업데이트되지 않습니다 (완전히 다른 모델의 The Wanderer는 이름 접두사가 실제로 수정 됨). 그러면 문자열이 올바른 것입니다. 내가 시도한 다른 것들 : 변수에서 "this"에 대한 참조를 만들고 loadData에 전달하고 일단 ajax가로드되면 텍스트를 설정하지만 제목이 fancybox가 열린 상태에서 전혀 업데이트되지 않은 것처럼 보입니다. div in html.

최후의 수단으로 각 문자열을 미리로드하고 배열로 설정할 수도 있지만, 오히려 수행하려는 것은 성공시 문자열을 업데이트하는 것입니다.

가능한 한 제네릭을 유지하려고 애썼지 만 질문이 있으면 알려주세요.

편집 : 화살표 키를 두 번 누르면 (로드하려면 두 번째로 지정하면) 텍스트가 이전 이미지의 설명으로 업데이트됩니다. 단지 문자열을 새로 고치지 않는 fancybox의 문제 일뿐입니다.

편집 2 : 네, 많이 편집합니다. 알아. onUpdate 콜백을 발견 했으므로, 아약스 성공시 $ .fancybox.update();를 호출했습니다.

내의 onUpdate는 다음과 같습니다

onUpdate : function() { 
         console.log("on update"); 
         this.title = this.element.data('title') + sDescription; 
         console.log(this.title); 

        } 

콘솔의 제목은 페이지의 제목을 다시 보정되어 없습니다. 이것은 창을 닫지 않고 제목을 바꿀 수 없다는 것을 말해줍니다 ...

답변

0

와우, 나는 이것을 생각하지 못하고 바보라고 느낍니다.하지만 div를 직접 수정할 수 있다는 것을 잊어 버렸습니다.

$(".fancybox-title").html(this.element.data('title') +" "+ sDescription)