Question

我正在尝试组合ContentFlow（http://jacksasylum.eu/ContentFlow/）和ColorBox（http://www.jacklmoore.com/colorbox/）：当用户点击ContentFlow中的图像时，我希望在ColorBox中显示HTML页面。

我尝试使用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);
    }
}

于2013年10月1日编辑只有当项目包含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页面。

希望这有帮助！

如何组合ContentFlow和ColorBox

1 个答案: