Question

首先关闭 - 我检查了这个非常相似的主题：Using Colorbox, how can I create browser history states for each modal box?但这适用于模态框和内联内容。

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

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

$（'。lightbox'）。colorbox（{rel：'lightbox'，slideshow：true，slideshowSpeed：4000}）;

其中包含'lightbox'类的链接：

如果用户点击浏览器中的后退按钮，它们将被正确地带到他们所在的最后一个网页。我在Facebook上注意到你在专辑中浏览照片时，它会更新浏览器中的URL以提供历史记录 - 有没有人知道我是否可以使用Colorbox？

非常感谢您的帮助！

Answer 1

你想做这样的事情。

您希望添加一些代码，这些代码将在每张幻灯片加载时运行，因此您将使用colorbox 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.
});

Colorbox可以维护照片幻灯片浏览器历史记录（啦啦啦啦）

1 个答案: