无法从哈希/锚点加载 URL

Question

这是我的问题：

我用 Jquery Elastislide 插件创建了一个画廊

当我点击拇指时，Hash 出现在图片中......但是当我刷新/重新加载页面作为链接时，Hash 没有加载图片，我希望 Hash 加载相应的图片。

我尝试了一些 Jquery 插件，例如 Address、BBQ、History，但它不起作用。

$(function() {

    $.fn.imagesLoaded       = function( callback ) {
    var $images = this.find('img'),
        len     = $images.length,
        _this   = this,
        blank   = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';


    function triggerCallback() {
        callback.call( _this, $images );
    }

    function imgLoaded() {
        if ( --len <= 0 && this.src !== blank ){
            setTimeout( triggerCallback );
            $images.off( 'load error', imgLoaded );
        }
    }

    if ( !len ) {
        triggerCallback();
    }

    $images.on( 'load error',  imgLoaded ).each( function() {
        // cached images don't fire load sometimes, so we reset src.
        if (this.complete || this.complete === undefined){
            var src = this.src;
            // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
            // data uri bypasses webkit log warning (thx doug jones)
            this.src = blank;
            this.src = src;
        }
    });




    return this;
    };


    // gallery container
    var $rgGallery          = $('#rg-gallery'),
    // carousel container
    $esCarousel         = $rgGallery.find('div.es-carousel-wrapper'),
    // the carousel items
    $items              = $esCarousel.find('ul > li'),
    // total number of items
    itemsCount          = $items.length;



    Gallery             = (function() {
            // index of the current item




        var  current            =  0,


            // mode : carousel || fullview
            mode            = 'carousel',
            // control if one image is being loaded
            anim            = false,
            init            = function() {

                // (not necessary) preloading the images here...
                $items.add('<img src="ajax-loader.gif"/><img src="black.png"/>').imagesLoaded( function() {
                    // add options
                    _addViewModes();

                    // add large image wrapper
                    _addImageWrapper();

                    // show first image
                    _showImage( $items.eq(window.location.hash));

                });

                // initialize the carousel
                if( mode === 'carousel' )
                    _initCarousel();

            },
            _initCarousel   = function() {

                // we are using the elastislide plugin:
                // http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/
                $esCarousel.show().elastislide({
                    imageW  : 65,
                    onClick : function( $item ) {
                        if( anim ) return false;
                        anim    = true;
                        // on click show image
                        _showImage($item);
                        // change current
                        current = $item.index(location.hash);
                        that.attr('href')

                    }
                });

Answer 1

所以如果有哈希，我们希望在页面加载时将信息传递给弹性幻灯片。

var imageIndex = 0; 
if (window.location.hash) {
    var imageIndexStr = window.location.hash.replace('#',''); // remove #
    imageIndex = parseInt(imageIndexStr, 10); // convert to int
}
$esCarousel.show().elastislide({
    current : imageIndex,
    [rest of elastislide setup as above]
});

我在这里假设哈希由图像的索引组成，例如#3