0

我在 Jquery Elastislide 有一个画廊。

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

感谢上面的代码，画廊得到了带有相应哈希的图片。 www.example.com/gallery.html#1_TITLE_OF_THE_PICTURE

当我将代码用画廊的箭头导航时，我进入以下 URL： 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) );

所以，我需要一些帮助才能在 URL 中获取完整的哈希。

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

HTML 代码：

<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>

事件导航：

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

            }

        },

感谢您的回答。

4

1 回答 1

1

这行代码将散列值设置为一个数字，这将导致它变成类似：www.example.com/gallery.html#1。

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

在我看来，当您更改图片时，您的导航功能并未将标题放在新的哈希值上。我想你想要这样的东西：

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

显然需要填写 newPictureTitle 的值的地方

根据您显示的 HTML 和其他 javascript，您的_navigate()函数可以像这样工作：

_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");
}
于 2012-08-28T00:57:30.537 回答