3

首先 - 我检查了这个非常相似的线程：使用 Colorbox，如何为每个模式框创建浏览器历史状态？但这适用于模态框和内联内容。

我希望有一种（相对）简单的方法可以通过从锚点调用的 Colorbox 幻灯片来维护浏览器的点击历史记录——你可以在这里看到我的意思：http: //katlo.freshmango.com/（点击在任何照片上）。

这是由 JS 文件中的这一行调用的：

$('.lightbox').colorbox({rel:'lightbox',slideshow:true, slideshowSpeed:4000});

以及其中包含“灯箱”类的链接：

目前，如果用户单击浏览器中的后退按钮，他们将正确地被带到他们上一个网页。我在 facebook 中注意到，当您浏览相册中的照片时，它会更新浏览器中的 URL 以提供历史记录 - 有谁知道我是否可以使用 Colorbox？

非常感谢您的帮助！

4

1 回答 1

2

你想做这样的事情。

您想添加一些将在每张幻灯片加载时运行的代码，因此您将使用颜色框 onLoad 回调（onComplete 可能会更好 - 您必须尝试一下）。

然后，您需要使用 history.js 库：https ://github.com/browserstate/History.js/ 。一个警告。您想使用 HTML4 哈希回退。如果你不这样做，那么在 HTML4 浏览器上，按下后退按钮将导致页面刷新，这不是你想要的。

$('.lightbox').colorbox({
    rel: 'lightbox',
    slideshow: true,
    slideshowSpeed: 4000,
    onLoad: function() {

        // get slide number by looking in the caption field (e.g. 'image 6 of 10')
        // and removing extraneous text
        current_text = $('#cboxCurrent').html();
        current_index = current_text.substr(6).substr(0, current_text.indexOf('of') - 7)

        // add a new url with the current slide number to the browser's history
        var History = window.History;
        History.pushState('', '', window.location.href + '?slide=' + current_index);

    }
});​

您需要做的最后一件事是告诉浏览器每次状态更改时（意味着如果有人按下后退按钮），您想要重新加载 url 中指定的幻灯片的灯箱（在我们的示例幻灯片 6 中）。

// Bind to StateChange Event
History.Adapter.bind(window,'statechange',function(){
    var State = History.getState();
    // State.url will contain the url http://katlo.freshmango.com/?slide=6, so you
    // need to write some code to load up the colorbox on that slide.
});
于 2012-11-08T08:58:05.630 回答