ContentFlow와 ColorBox를 결합하는 방법

Question

ContentFlow에서 이미지를 클릭 할 때 ContentFlow (http://jacksasylum.eu/ContentFlow/)와 ColorBox (http://www.jacklmoore.com/colorbox/)를 결합하려고합니다. HTML 페이지를 ColorBox에 표시하려고합니다.

ColorBox 예제에 제공된 코드를 사용하지 않으려 고 시도했습니다. HTML 페이지는 브라우저에 의해 보통의 링크 (ColorBox는 아닙니다.)로로드됩니다.

행운없이 ContentFlow addon을 만들려고 시도했습니다. 아무 것도 표시되지 않고 단순하지도 않습니다. 이미지 : 01/10월/2013 에

onclickActiveItem: function (item) { 
    var content = item.content; 
    if (content.getAttribute('src')) { 
     if (item.content.getAttribute('href')) { 
      item.element.href = item.content.getAttribute('href'); 
     } 
     else if (! item.element.getAttribute('href')) { 
      item.element.href = content.getAttribute('src'); 
     } 
     if (item.caption) 
      item.element.setAttribute ('title', item.caption.innerHTML); 
     colorbox.show(item.element); 
    } 
} 

편집 항목은 href가 포함 된 경우 문제는 자체 명단.

$.colorbox({open:true, href:"http://mysite.gr/colorbox/content/static.html"}); 

아이템이 단순한 이미지 정적 웹 페이지가 ColorBox에 표시됩니다 그것은이를 증명하기 위해 나는 정적 웹 페이지를 표시하기 위해 위의 코드를 변경했습니다. 하지만 항목에 ColorBox에 표시 할 웹 페이지의 href가 포함되어 있으면 브라우저가 링크를 따라 지정된 페이지를로드합니다. 이 문제를 어떻게 막을 수 있을지에 대한 아이디어가 있습니까?

도움을 주셔서 감사합니다.

Answer 1

나는 마침내 내 질문에서 설명한 문제를 해결했습니다. 해결책은 다음과 같이 ContentFlow 애드온을 작성하는 것입니다.

new ContentFlowAddOn ('colorbox', { 
    init: function() { 
    var colorboxBaseDir = this.scriptpath+"../colorbox/"; 
    var colorboxCSSBaseDir = colorboxBaseDir; 
    var colorboxImageBaseDir = colorboxBaseDir; 

    this.addScript(colorboxBaseDir+"jquery.colorbox.js"); 
    this.addStylesheet(colorboxCSSBaseDir+"example3/colorbox.css"); 
    }, 

    ContentFlowConf: { 
    onclickInactiveItem: function (item) { 
     this.conf.onclickActiveItem(item); 
    }, 

    onclickActiveItem: function (item) { 
     var content = item.content; // ContentFlow's content class 
     var theItem = item.item; // ContentFlow's item class - if you need access to it 
     var hrefToDisplay = ''; 

     if (content.getAttribute('src')) { 
     if (content.getAttribute('href')) { 
      hrefToDisplay = item.content.getAttribute('href'); 
     } 
     else if (!item.element.getAttribute('href')) { 
      hrefToDisplay = content.getAttribute('src'); 
     } 

     $.colorbox({iframe:true, href:hrefToDisplay, title:item.caption}); 
     } 
    } 
    } 
}); 

비밀은 iframe에서 HTML 페이지를 여는 것입니다.

희망이 도움이됩니다.