0

我正在尝试结合 ContentFlow ( http://jacksasylum.eu/ContentFlow/ ) 和 ColorBox ( http://www.jacklmoore.com/colorbox/ )：当用户单击 ContentFlow 中的图像时，我想要一个 HTML 页面显示在 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);
    }
}

于 2013 年 10 月 1 日编辑该问题仅在项目包含 href 时才会出现。为了证明这一点，我更改了上面的代码以显示静态网页：

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

如果该项目只是一个简单的图像，则静态网页显示在 ColorBox 中。但是，如果该项目包含我希望在 ColorBox 中显示的网页的 href，则浏览器会跟随链接并加载指定的页面。关于如何阻止这种情况发生的任何想法？

预先感谢您的帮助！

4

1 回答 1

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 页面。

希望这可以帮助！

于 2013-11-01T17:15:11.857 回答