Question

I have a gallery in jQuery Elastislide.

Pictures get a hash. When I click on a thumbnail, the hash appears. But when I click on arrows or navigate using arrow keys on the keyboard, the hash doesn’t change.

Here’s the JavaScript code:

        $('#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) );

        },

Answer 1

I had a lot of success using jquery bbq: http://benalman.com/projects/jquery-bbq-plugin/

You can push specific hash values, replace the whole thing, or whatever you’d like.

It also allows you to handle/monitor hashchange events.