0

ここに私の問題があります:

Jquery Elastislide Pluginでギャラリーを作成しました

親指をクリックすると、画像とともにハッシュが表示されます...しかし、ページをリンクとして更新/再ロードすると、ハッシュは画像とともに読み込まれません。ハッシュに対応する画像を読み込みます。

Address、BBQ、HistoryなどのJquery プラグインを試してみましたが、うまくいきません。

$(function() {

    $.fn.imagesLoaded       = function( callback ) {
    var $images = this.find('img'),
        len     = $images.length,
        _this   = this,
        blank   = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';


    function triggerCallback() {
        callback.call( _this, $images );
    }

    function imgLoaded() {
        if ( --len <= 0 && this.src !== blank ){
            setTimeout( triggerCallback );
            $images.off( 'load error', imgLoaded );
        }
    }

    if ( !len ) {
        triggerCallback();
    }

    $images.on( 'load error',  imgLoaded ).each( function() {
        // cached images don't fire load sometimes, so we reset src.
        if (this.complete || this.complete === undefined){
            var src = this.src;
            // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
            // data uri bypasses webkit log warning (thx doug jones)
            this.src = blank;
            this.src = src;
        }
    });




    return this;
    };


    // gallery container
    var $rgGallery          = $('#rg-gallery'),
    // carousel container
    $esCarousel         = $rgGallery.find('div.es-carousel-wrapper'),
    // the carousel items
    $items              = $esCarousel.find('ul > li'),
    // total number of items
    itemsCount          = $items.length;



    Gallery             = (function() {
            // index of the current item




        var  current            =  0,


            // mode : carousel || fullview
            mode            = 'carousel',
            // control if one image is being loaded
            anim            = false,
            init            = function() {

                // (not necessary) preloading the images here...
                $items.add('<img src="ajax-loader.gif"/><img src="black.png"/>').imagesLoaded( function() {
                    // add options
                    _addViewModes();

                    // add large image wrapper
                    _addImageWrapper();

                    // show first image
                    _showImage( $items.eq(window.location.hash));

                });

                // initialize the carousel
                if( mode === 'carousel' )
                    _initCarousel();

            },
            _initCarousel   = function() {

                // we are using the elastislide plugin:
                // http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/
                $esCarousel.show().elastislide({
                    imageW  : 65,
                    onClick : function( $item ) {
                        if( anim ) return false;
                        anim    = true;
                        // on click show image
                        _showImage($item);
                        // change current
                        current = $item.index(location.hash);
                        that.attr('href')

                    }
                });
4

1 に答える 1

0

したがって、ハッシュがある場合は、ページが読み込まれたときに情報をエラスティスライドに渡します。

var imageIndex = 0; 
if (window.location.hash) {
    var imageIndexStr = window.location.hash.replace('#',''); // remove #
    imageIndex = parseInt(imageIndexStr, 10); // convert to int
}
$esCarousel.show().elastislide({
    current : imageIndex,
    [rest of elastislide setup as above]
});

ここでは、ハッシュが画像のインデックスで構成されていると想定しています。例：＃3

于 2012-08-27T03:06:44.510 に答える