0

ContentFlow ( http://jacksasylum.eu/ContentFlow/ ) と ColorBox ( http://www.jacklmoore.com/colorbox/ )を組み合わせようとしています: ユーザーが ContentFlow の画像をクリックすると、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 が含まれている場合にのみ発生します。これを証明するために、上記のコードを静的な Web ページを表示するように変更しました。

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

アイテムが単純な画像である場合、静的 Web ページは ColorBox に表示されます。しかし、アイテムに ColorBox に表示したい Web ページへの 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});
      }
    }
  }
});

その秘密は、HTML ページを iframe で開くことです。

お役に立てれば！

于 2013-11-01T17:15:11.857 に答える