Question

I’m creating a photo slideshow that allows for deep-linking. As a user progresses through the slideshow, the anchor tag in the URL bar updates as well, and if someone visits the URL with the anchor tag, that slide is shown first. Example URL:

http://domain.com/news/some-article-slug/#/slide5

I am doing this by simply passing window.location.hash to the object:

start: window.location.hash.substring(7), // eg. "#/slide5"

// ...

var startingSlide;
this.start = 0;
this.deeplink = this.options.start != null;

if (this.deeplink) {
  startingSlide = Number(this.options.start);
  if (startingSlide > 0 && startingSlide <= this.total) {
    // use that number as the starting slide
  }
}

// ...

this.slides.bind("switch", function(idx) {
  if (_this.deeplink) {
    return window.location.hash = "/slide" + (idx + 1);
  }
});

This all works nicely. My problem is as follows:

As the user looks at slides and the URL anchor updates, this is all registered in the browser’s history, so using the browser’s back button just goes back through the anchors. What I would like to happen is for the back button to go back to the last loaded page.

Imgur has the exact behavior that I’m looking for. Here’s a real example:

https://i.stack.imgur.com/Nu8aH.jpg

Imgur’s javascript is all minified, though, so I can’t really find out how it’s being done by reading.

Thanks!

Update

I ended up using something like this:

var slidePath;

if (this.deeplink) {
  slidePath = [window.location.pathname, "/slide" + (idx + 1)].join("#");
  window.history.replaceState(null, window.title, slidePath);
}

I decided not to use History.js for a few reasons – I am trying not to include any more JS libraries on my page, and it was also giving me a bit of trouble right off the bat when I did try to include it. The lack of support for older browsers is okay with me.

Answer 1

You can use history.replaceState() to accomplish this.

this.slides.bind("switch", function(idx) {
  if (_this.deeplink) {
    var newUrl = window.location + "#/slide" + (idx + 1);
    return window.history.replaceState(null, window.title, newUrl);
  }
});