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

Change hash in URL when using arrows to navigate in my gallery (jQuery)

本文关键字:导航 更改 哈希 URL 我的 jQuery      更新时间:2023-09-26

我在jQuery中有一个库

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

这是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) );
        },

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

你可以推送特定的散列值,替换整个东西,或者你想要的任何东西。

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