0

JqueryElastislideにギャラリーがあります。

 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 に答える