使用箭头在我的库中导航时更改URL中的哈希值(jQuery)

时间:2012-08-27 15:12:26

标签: javascript jquery url hash

我在jQuery Elastislide中有一个画廊。

图片获得哈希值。当我点击缩略图时,会出现哈希。但是当我点击箭头或使用键盘上的箭头键导航时,散列不会改变

这是JavaScript代码:

        $('#img-wrapper-tmpl').tmpl( {itemsCount : itemsCount} ).prependTo( $rgGallery );

            if( itemsCount > 1) {
                // addNavigation
                var $navPrev        = $rgGallery.find('a.rg-image-nav-prev'),
                    $navNext        = $rgGallery.find('a.rg-image-nav-next'),
                    $imgWrapper     = $rgGallery.find('div.rg-image');

                $navPrev.on('click.rgGallery', function( event ) {
                    _navigate( 'left' );
                    return false;
                }); 

                $navNext.on('click.rgGallery', function( event ) {
                    _navigate( 'right' );
                    return false;
                });

                // add touchwipe events on the large image wrapper
                $imgWrapper.touchwipe({
                    wipeLeft            : function() {
                        _navigate( 'right' );
                    },
                    wipeRight           : function() {
                        _navigate( 'left' );
                    },
                    preventDefaultEvents: false
                });

                $(document).on('keyup.rgGallery', function( event ) {
                    if (event.keyCode == 39)
                        _navigate( 'right' );
                    else if (event.keyCode == 37)
                        _navigate( 'left' );    
                });

            }

        },
        _navigate       = function( dir ) {

            // navigate through the large images

            if( anim ) return false;
            anim    = true;

            if( dir === 'right' ) {
                if( current + 1 >= itemsCount )
                    current = 0;
                else
                    ++current;
            }
            else if( dir === 'left' ) {
                if( current - 1 < 0 )
                    current = itemsCount - 1;
                else
                    --current;
            }

            _showImage( $items.eq( current) );

        },

1 个答案:

答案 0 :(得分:0)

我使用jquery bbq获得了很多成功:http://benalman.com/projects/jquery-bbq-plugin/

您可以推送特定的哈希值,替换整个内容或任何您喜欢的内容。

它还允许您处理/监视hashchange事件。