Can Colorbox Maintain A Photo Slideshow Browser History (a la facebook)

Question

First off - I checked out this very similar thread: Using Colorbox, how can I create browser history states for each modal box? but this applies to modal boxes and inline content.

I was hoping there might be a (relatively) simple way to maintain browser history for the clicks through a Colorbox slideshow invoked from an anchor - you can see what I mean in action here: http://katlo.freshmango.com/ (click on any photo).

This is invoked by this line in the JS file:

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

And the link having the 'lightbox' class in it:

At the moment if the user clicks the back button the in the browser, they are correctly taken to the last webpage they were on. I notice in facebook when you go through photos in an album, it updates the URL in the browser to give a history - does anyone know if this i possible with Colorbox?

Many thanks for any help!

Answer 1

You want to do something like this.

You want to add in some code that will be run when every slide loads, so you will use the colorbox onLoad callback(onComplete might work better - you'll have to play around).

Then, you'll want to use the history.js library: https://github.com/browserstate/History.js/. One caveat. You want to use the HTML4 hash fallback. If you don't, then on HTML4 browsers, pressing the back button will cause a page refresh which is not what you want.

$('.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);

    }
});​

And the last thing you need to do is to tell the browser that everytime the state changes (meaning if someone presses the back button), you want to reload the lightbox for the slide specified in the url (in our example slide 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.
});