How to combine ContentFlow and ColorBox

Question

I am trying to combine ContentFlow ( http://jacksasylum.eu/ContentFlow/ ) and ColorBox ( http://www.jacklmoore.com/colorbox/ ): when the user clicks on an image in ContentFlow I want an HTML page to be displayed in ColorBox.

I have tried using the code provided by the ColorBox examples' section to no avail. The HTML page is loaded by the browser as a normal link (not in ColorBox.)

I have even tried creating a ContentFlow addon (using the LightBox addon as an example) without any luck - nothing is displayed, not even simple images:

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

Edited on 01/Oct/2013 The problem only manifests itself when an item contains an href. To prove this I changed the code above to show a static web page:

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

It the item is just a simple image the static web page is displayed in ColorBox. But if the item contains an href to the web page I want displayed in ColorBox the browser follows the link and loads the specified page. Any ideas on how to stop this from happening?

Thank you in advance for your help!

Answer 1

I have finally solved the problem I have described in my question. The solution involves creating a ContentFlow addon as follows:

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

The secret is to open the HTML page in an iframe.

Hope this helps!