如何将深层链接添加到HTML5 Up模板中？

Question

我使用下面的HTML5模板最多： https://html5up.net/lens

...我希望能够从外部站点在幻灯片放映链接到特定的幻灯片。

如何将深度链接添加到模板？

Answer 1

您需要通过javascript切换幻灯片，这就是模板的构建方式。

首先，你有一个iframe的链接到https://html5up.net/uploads/demos/lens/ - 在那里看代码，你会发现图书馆main.js，宣布main对象。

使用此main你可以切换幻灯片如下：

main.switchTo(number); 

其中number是幻灯片的数量。

现在，你需要的是在javascript中处理url参数并使用它们来调用它。为此，请从How can I get query string values in JavaScript?获取代码，并在页面加载后立即运行。

它看起来像这样：

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)); 
    } 
}); 

然后你应该能够通过添加的形式?slideNumber=1到URL的查询字符串来触发代码。