Question

我正在使用以下HTML5 Up模板： https://html5up.net/lens

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

如何添加模板的深层链接？

Answer 1

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

首先，您所拥有的链接有一个iframe到https://html5up.net/uploads/demos/lens/ - 查看那里的代码，您会找到声明main对象的库main.js。

使用此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形式的查询字符串添加到网址来触发该代码。

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

1 个答案: