如何結合ContentFlow和ColorBox

我想結合ContentFlow（http://jacksasylum.eu/ContentFlow/）和ColorBox（http://www.jacklmoore.com/colorbox/）：當用戶點擊ContentFlow中的圖像時，我想要在ColorBox中顯示HTML頁面。如何結合ContentFlow和ColorBox

我嘗試過使用ColorBox示例部分提供的代碼無濟於事。 HTML頁面被瀏覽器加載爲普通鏈接（不在ColorBox中）。

我甚至嘗試過創建一個ContentFlow插件（使用LightBox插件作爲例子），沒有任何運氣 - 沒有任何顯示，甚至不是簡單的圖片：

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

上編輯01月/ 10月/ 2013 的問題，只有當一個項目包含一個href表現。爲了證明這一點，我改變了上面的代碼顯示一個靜態頁面：

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

它的項目只是一個簡單的圖像靜態網頁顯示在彩盒。但是，如果該項目包含我希望在ColorBox中顯示的網頁的href，瀏覽器將跟隨鏈接並加載指定的頁面。關於如何阻止這種情況發生的任何想法？

非常感謝您的幫助！

來源

2013-09-29 Angelos Arampatzis

我終於解決了我在我的問題中描述的問題。該解決方案包括創建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頁面。

希望這會有所幫助！

來源

2013-11-01 17:15:11

如何結合ContentFlow和ColorBox

回答

相關問題