Can Colorbox Photo Slideshow 브라우저 기록 (a la facebook)

Question

먼저 -이 매우 유사한 스레드를 체크 아웃했습니다 : Using Colorbox, how can I create browser history states for each modal box?하지만 이것은 모달 상자와 인라인 컨텐츠에 적용됩니다.

앵커에서 호출 된 Colorbox 슬라이드 쇼를 통해 클릭에 대한 브라우저 기록을 유지할 수있는 (상대적으로) 간단한 방법이있을 것으로 기대하고 있습니다. 여기에서 실제로 작동하는 것을 볼 수 있습니다 : http://katlo.freshmango.com/ (아무 사진이나 클릭).

이

은 JS 파일에이 선으로 호출됩니다

$ colorbox ({REL : '라이트', 슬라이드 쇼 : 사실, slideshowSpeed ​​: 4000}) ('라이트 박스..');

그리고 그것의 '라이트 박스'클래스를 갖는 링크 :

순간은 사용자가 브라우저에서, 그들은 정확하게 그들이에 있던 마지막 웹 페이지로 이동하는 뒤로 버튼을 클릭하면 . 나는 페이스 북에서 앨범의 사진을 보았을 때 브라우저의 URL을 업데이트하여 기록을 남긴다는 것을 알았다.

많은 도움을 주셔서 감사합니다.

Answer 1

이렇게하고 싶습니다.

모든 슬라이드가로드 될 때 실행할 코드를 추가하려고하므로 colorBox onLoad 콜백을 사용합니다 (onComplete가 더 잘 작동 할 수 있습니다 - 주위를 놀아야 할 것입니다).

그런 다음 history.js 라이브러리 (https://github.com/browserstate/History.js/)를 사용하려고합니다. 한가지주의 할 점. HTML4 해시 대체를 사용하려고합니다. 그렇게하지 않으면 HTML4 브라우저에서 뒤로 버튼을 누르면 원하는 페이지가 새로 고침됩니다.

$('.lightbox').colorbox({ 
    rel: 'lightbox', 
    slideshow: true, 
    slideshowSpeed: 4000, 
    onLoad: function() { 

     // get slide number by looking in the caption field (e.g. 'image 6 of 10') 
     // and removing extraneous text 
     current_text = $('#cboxCurrent').html(); 
     current_index = current_text.substr(6).substr(0, current_text.indexOf('of') - 7) 

     // add a new url with the current slide number to the browser's history 
     var History = window.History; 
     History.pushState('', '', window.location.href + '?slide=' + current_index); 

    } 
});​ 

그리고 당신이해야 할 마지막 일은 (누군가가 뒤로 버튼을 누를 때 의미)마다 상태가 변경되는 경우 URL에 지정된 슬라이드 라이트를 다시로드 할 브라우저를 알리는 것입니다 (에 예제 슬라이드 6).

// Bind to StateChange Event 
History.Adapter.bind(window,'statechange',function(){ 
    var State = History.getState(); 
    // State.url will contain the url http://katlo.freshmango.com/?slide=6, so you 
    // need to write some code to load up the colorbox on that slide. 
});