HTML5 업 템플릿에 딥 링크를 추가하려면 어떻게해야합니까?

Question

나는 다음과 같은 HTML5 위로 템플릿을 사용하고 있습니다 : https://html5up.net/lens

을 ... 그리고 나는 외부 사이트에서 슬라이드 쇼에서 특정 슬라이드로 링크 할 수 있도록하고 싶습니다.

템플릿에 딥 링크를 추가하려면 어떻게해야합니까?

Answer 1

슬라이드를 자바 스크립트로 전환해야 템플릿이 만들어집니다.

우선 링크가 https://html5up.net/uploads/demos/lens/ 인 iframe을 가지고 있습니다. 코드를 보면 main 객체를 선언하는 라이브러리 main.js을 찾을 수 있습니다. 다음과 같이이 main 당신이 슬라이드를 전환 할 수 있습니다 사용

:

수는 슬라이드의 수입니다

main.switchTo(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)); 
    } 
}); 

을 그리고 당신은 URL로 양식 ?slideNumber=1의 쿼리 문자열을 추가하여 그 코드를 실행 할 수 있어야한다 :

은 다음과 같습니다.