0

スライドをナビゲートし、各トランジションでロケーションハッシュを修正（置換）するために、コアにjQueryCycleを持つjQuerymaximageを使用しています。

あなたがあまりにも速くナビゲートしようとする場合を除いて、それは機能します。その時点で、ページが無限にリロードしようとするため、ブラウザ（FirefoxおよびChromeでテスト済み）がクラッシュします。

$(function(){
    var h, 
        hash = window.location.hash, 
        hashes = {},
        index = 0;
    // Iterate slides into hashes object
    $('#slides').children('div').each(function(i) {
        h = $(this).attr('id');
        // Change IDs to hash format
        h = h.replace(/\ /g, '-');
        hashes[h] = i;
        slideInteger = i
    });
    if (hash) {
        index = hashes[hash.substring(1)] || index;
    };
    $('#slides').maximage({
        cycleOptions: {
            startingSlide: index,
            cssTransitions: true,
            after: onAfter,
            fx: 'fade',
            speed: 360,
            timeout: 0
        },
        onFirstImageLoaded: function(){
            $('#cycle-loader').hide();
            // Remove tooltip on hover
            $('.mc-image').hover(function(){
                $(this).removeAttr('title');
            });
        }
    });
    function onAfter(el, next_el, opts) {
        var nextHash = $(next_el).find('.slideLink').text().toLowerCase().replace(/\ /g, '-');
        window.location.replace(('' + window.location).split('#')[0] + '#' + nextHash);
    };
    $(window).on("hashchange", function() {
        $('#slides').cycle(hashes[window.location.hash.substring(1)] || 0);
    });
});

onAfter関数を...に置き換えてみました

function onAfter(el, next_el, opts) {
    var nextHash = $(next_el).find('.slideLink').text().toLowerCase().replace(/\ /g, '-');
    if( window.location.hash != ('#' + nextHash) ){
        window.location.replace(('' + window.location).split('#')[0] + '#' + nextHash);
    }
};

...しかし、それは何の違いももたらさなかったようです。

これは、jsfiddleでも再現できるものではないようです。したがって、物理的なデモンストレーションが不足していることをお詫びします。

4

1 に答える 1

1

そのためには HTML5 history.pushState/ history.replaceStateAPI を使用する必要があります。古いブラウザ用のシムもあります。

https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history 「履歴エントリの追加と変更」

于 2013-02-28T11:59:54.077 に答える