Home/ Questions/Q 8446685
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T09:59:23+00:00

I have a gallery in Jquery Elastislide. var imageIndex = 0; if (window.location.hash) {

  • 0

I have a gallery in Jquery Elastislide.

 var imageIndex = 0; 
if (window.location.hash) {
    var imageIndexStr = window.location.hash.replace('#',''); // remove #
    imageIndex = parseInt(imageIndexStr, 0); // convert to int
}

Thanks to the code above, The gallery got pictures with corresponding Hash.
http://www.example.com/gallery.html#1_TITLE_OF_THE_PICTURE

When I put the code to navigate with arrows of the gallery, I get in the following URL :
http://www.example.com/gallery.html#1

_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( window.location.hash = current) );

So, I want some help in order to get in the URL the full Hash.

http://www.example.com/gallery.html#1_TITLE_OF_THE_PICTURE

HTML Code : 

<head>
<style>
                .es-carousel ul{
                    display:block;
                }
            </style>

            <script id="img-wrapper-tmpl" type="text/x-jquery-tmpl">    
            <div class="rg-image-wrapper">
                {{if itemsCount > 1}}
                    <div class="rg-image-nav">
                        <a href="#"  class="rg-image-nav-prev">Previous Image</a>
                        <a href="#"  class="rg-image-nav-next">Next Image</a>
                    </div>
                {{/if}}
                <div class="rg-image"></div>
                <div class="rg-loading"></div>
                <div class="rg-caption-wrapper">
                    <div class="rg-caption" style="display:none;">
                        <p></p>
                    </div>
                </div>
            </div>
        </script>
</head>

<body>

<div class="container_gallery">


<div id="rg-gallery" class="rg-gallery">
                    <div class="rg-thumbs">
                        <!-- Elastislide Carousel Thumbnail Viewer -->

                        <div class="es-carousel-wrapper">
                            <div class="es-nav">
                                <span class="es-nav-prev">Previous</span>
                                <span class="es-nav-next">Next</span>
                            </div>
                            <div class="es-carousel">
                                <ul>
                                    <li> <a href="#0_Title_1"><img src="picture_thumb.jpg" data-large="picture.jpg" alt="Title_1" data-description="Title_1"  /></a></li>

href="#0_Title_2"><img src="picture2_thumb.jpg" data-large="picture2.jpg" alt="Title_2" data-description="Title_2"  /></a></li>

href="#0_Title_3"><img src="picture3_thumb.jpg" data-large="picture3.jpg" alt="Title_3" data-description="Title_3"  /></a></li>



</ul>
                            </div>
                        </div>
                        <!-- End Elastislide Carousel Thumbnail Viewer -->
                    </div><!-- rg-thumbs -->
                </div><!-- rg-gallery -->



</div>

Event Navigation :

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

            }

        },

Thanks for your answers.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This line of code is setting the hash value to just be a number which would cause it to become something like: www.example.com/gallery.html#1.

    _showImage( $items.eq( window.location.hash = current) );

    It looks to me like your navigate function is not putting the title onto the new hash value when you change pictures. I think you want something like this:

    window.location.hash = current + "_" + newPictureTitle;
_showImage( $items.eq(current) );

    Where you obviously need to fill in the value of newPictureTitle

    Based on the HTML and other javascript you’ve shown, your _navigate() function could work like this:

    _navigate  = function( dir ) {
    // navigate through the large images
    if( anim ) return false;
    anim    = true;

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

    // show the right image
    _showImage( $items.eq(current) );

    // now get the right image title so it can go in the hash value
    // we assume here that current is a zero based index
    var links = $("#rg-gallery .es-carousel li a");
    // use getAttribute here to get the raw href that's in the 
    // HTML source file (not a fully qualified URL)
    window.location.hash = links.get(current).getAttribute("href");
}
    • 0