Fancybox에서 'iframe에서 부모에서 열기', 'side on title'및 'customizing title'을 조합합니다.

Question

부모 페이지에서 iframe에서 Fancybox를 열고 오른쪽에 제목을 사용하고 싶습니다. 내 사진에 대한 설명.

나는 세 가지 아이디어가 이러한 예는 별도로 작동하도록 관리 :

Open iframe in parent

Title on right

Custom title using a title and img alt

을 그러나, 나는이 문제를 세 가지 코드를 병합하는 데 문제가 있습니다. 나는 Fancybox 2.1.7을 사용하고 있습니다.

iframe 및 콜백에서 부모 정보를 찾을 수있는 모든 게시물을 읽은 후, 필자가 사용해야하는 콜백 (beforeShow 및 afterLoad)이 iframe에서 부모에서 작동하지 않는다는 것을 깨달았습니다.

$(document).ready(function() { 
    $(".fancybox").click(function(e){ 
     e.preventDefault(); 
    parent.$.fancybox({ 
// $(".fancybox").fancybox({ 
     href: this.href, 
     helpers: { 
     title: null 
     }, 
     beforeShow: function() { 
     var html = '<span>' + this.title + '</span>'; 
     $('.fancybox-sidebar').append(html); 
     }, 
     tpl: { 
     wrap: '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"><div class="fancybox-sidebar"></div></div></div></div></div>' 
     }, 
    }); // fancybox 
    }); // click 
}); // ready 

중 하나 parent.$.fancybox({의 조합 또는 :

나는 '부모 --은 iframe에서'내를 iframe 페이지에 넣고 '타이틀에 오른쪽'에 가입하려고이 코드에 도달 결국 $(".fancybox").fancybox({을 this.href으로 설정하면 beforeShow이 전혀 작동하지 않게됩니다. 그러나 $(".fancybox").fancybox({의 주석 처리를 해제하면 beforeShow이 예상대로 작동합니다. 그리고 내 그림은 parent.$.fancybox({을 사용했을 때 부모 페이지에서 열어서 this.href을 주석 처리하지 않았습니다.

상위 페이지에서 beforeShow 및 afterLoad (title-and-description 코드)를 호출하려면 어떻게해야합니까?

나는이 시도 :

$(document).ready(function() { 
    $(".fancybox").click(function(e){ 
     e.preventDefault(); 
parent.$.fancybox({ 
//$(".fancybox").fancybox({ 
    href: this.href, 
    title: this.title, 
    helpers: { 
     title: null 
    }, 
parent.$.fancybox.click(function() { 
    afterLoad: function() { 
     var title = this.title ? this.title : " "; 
     var alt = $(this.element).find('img').attr('alt') ? $(this.element).find('img').attr('alt') : " "; 
     this.title = '<h3>' + title + '</h3>' + alt + '<br />'; 
    } 
}); //closes parent afterLoad 
    beforeShow: function() { 
parent.$.fancybox.ready(function(){ 
     var html = '<span>' + this.title + '</span>'; 
     $('.fancybox-sidebar').append(html); 
}); // closes parent beforeShow 
    }, //closes parent beforeShow 
    tpl: { 
parent.$.fancybox.ready(function(){ 
     wrap: '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"><div class="fancybox-sidebar"></div></div></div></div></div>' 
}); //closes parent tpl 
    }, //closes tpl 
    }); // fancybox 
}); // click 
}); // ready 

을하지만 그것은 작동하지 않았다. 나는 초보자이고해야 할 일이 무엇인지 알 것 같지만 어떻게해야할지 모른다.

로컬 호스트 프로젝트입니다. 여기에 누군가가이 문제가 될 수 있다고 읽었지 만, 세 코드가 모두 나를 위해 완벽하게 작동하므로 별개로 나는 그것을 기대하지 않습니다. ...

어떤 도움을 주시면 감사하겠습니다!

Answer 1

문제는 여기에있을 것 같다 :

helpers: { 
     title: null 
    }, 
parent.$.fancybox.click(function() { <------ what is this ? 
    afterLoad: function() { 

당신은 옵션과 값을 포함하는 개체를 전달할 수 있습니다.

btw, 나는 현대적인 코드 편집기가 그러한 구문 오류가 높을 것이라고 생각합니다.