How can I add deep links into an HTML5 Up template?

Question

I am using the following HTML5 Up template: https://html5up.net/lens

... and I would like to be able to link to a specific slide in the slide show from an external site.

How can I add deep links to the template?

Answer 1

You need to switch slides by javascript, that's the way the template is built.

First off, the link you have has a iframe to https://html5up.net/uploads/demos/lens/ - looking at the code there you will find the library main.js that declares a main object.

Using this main you can switch slides as follows:

main.switchTo(number);

Where number is the number of the slide.

Now, what you need is to handle the url parameters in javascript and use them to invoke that. In order to do so, take code from How can I get query string values in JavaScript? and run it as soon as the page loads.

It looks like this:

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

$(document).ready(function(){
   var slideNumber = getParameterByName('slideNumber');
   if(slideNumber !== null)
   {
       main.switchTo(parseInt(slideNumber, 10));
   }
});

And then you should be able to trigger that code by adding query string of the form ?slideNumber=1 to the url.