2012-01-16 3 views
1

나는 anythingslider을 사용하고 당신이 그것을 잘 알고있는 경우는 다음 다음과 같은 기능을 가지고 있음을 알 수 있습니다 사용할 수anythingslider에서 해시 태그 이름을 변경하려면 어떻게해야합니까?

hashTags : true,  // Should links change the hashtag in the URL? 

들이 페이지 인 것처럼 각 슬라이드에 대해 고유 한 URL을 생성하게를 . 그러나 해시 태그에 대한 일반 이름을 생성한다는 단점이 있습니다. (예를 들어

http://www.mysite.com/#&panel1-2

, 어떻게 각 슬라이드에 대한 사용자 정의 이름을 그 해시 태그의 이름을 변경할 수 있습니까?

을 지금 나는 그것이 각 슬라이드의 제목을 표시하기 위해 다음과 같은 기능을 사용하고 내 질문 탐색 모음에서 :.

navigationFormatter : function(i, panel){ 
    return panel.find('h6').text(); 
} 

내가하는 모든 일이 내가 <h6> 요소에 제목을 추가하는 것입니다 그래서, 어떻게 또한 해시 태그의 이름을 바꾸려면이 제목을 사용할 수

?

답변

2

당신은 기본 해시를 해제하고 창 해시 업데이트 할 onSlideComplete 콜백을 사용할 수 있습니다 (demo을하고, full screen demo) :

을 * 참고 : H6도의 텍스트 대에 id (허용 공백)가 H6 (공간을 허용하고, 탐색 탭에서 사용)

HTML

<ul id="slider"> 
    <li> 
     <img src="http://placekitten.com/320/200" alt="" /> 
     <h6 id="meow">Meow</h6> 
    </li> 
    <li> 
     <img src="http://placehold.it/320x200" alt="" /> 
     <h6 id="grey">Grey</h6> 
    </li> 
    <li> 
     <img src="http://placebear.com/320/200" alt="" /> 
     <h6 id="rawr">Rawr</h6> 
    </li> 
    <li> 
     <img src="http://dummyimage.com/320x200/000/fff.jpg" alt="" /> 
     <h6 id="bnw">Black & White</h6> 
    </li> 
    <li> 
     <img src="http://placedog.com/320/200" alt="" /> 
     <h6 id="woof">Woof</h6> 
    </li> 
</ul> 

스크립트

,

여기에 h6 ID 대신 패널 ID를 사용하는 another demo이 있습니다.

+0

와우, 정말 멋지다! 고맙습니다. 유일한 단점은 처리중인 페이지를 # 아래로 스크롤하는 것입니다. (내 WIP 사이트에서 볼 수 있습니다 : http://anekdamian.com/Insurance/). –

+0

오, 예, 잊어 버렸습니다 ... ID에 접두사를 추가하여 데모가 업데이트되어 페이지가 점프하지 않습니다. – Mottie

+0

오! 고맙습니다. 나는 그것을 시도했다, 그러나 아직도 뛰어 오르고있다. 해시 태그가 아닌 단어로 표시하는 방법은 없습니까? –

0

전 anythingslider를 사용한 적이 없지만 해시 태그를 변경하려는 경우 해시 생성 부분이 시작될 때 스크립트에서 window.location.hash을 찾기 시작할 수 있습니다.