3

まず、この非常によく似たスレッドを確認しました: Colorbox を使用して、モーダル ボックスごとにブラウザーの履歴状態を作成するにはどうすればよいですか? ただし、これはモーダル ボックスとインライン コンテンツに適用されます。

私は、アンカーから呼び出された Colorbox スライドショーを介してクリックのブラウザー履歴を維持する (比較的) 簡単な方法があることを望んでいました。どの写真でも）。

これは、JS ファイルの次の行によって呼び出されます。

$('.lightbox').colorbox({rel:'lightbox',slideshow:true, slideshowSpeed:4000});

そして、「ライトボックス」クラスを含むリンク:

ユーザーがブラウザの戻るボタンをクリックすると、最後に表示していた Web ページに正しく移動します。Facebookでアルバムの写真を閲覧すると、ブラウザのURLが更新されて履歴が表示されることに気づきました.Colorboxでこれが可能かどうかは誰にもわかりませんか?

助けてくれてありがとう！

4

1 に答える 1

2

あなたはこのようなことをしたいのです。

すべてのスライドが読み込まれるときに実行されるコードを追加する必要があるため、カラーボックスのonLoadコールバックを使用します（onCompleteの方がうまくいく可能性があります。いろいろと試してみる必要があります）。

次に、history.jsライブラリを使用する必要があります：https ：//github.com/browserstate/History.js/ 。1つの警告。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.
});
于 2012-11-08T08:58:05.630 に答える