Question

here’s my problem :

I created a gallery with Jquery Elastislide Plugin

When I click on a thumb, Hash appears with the picture… But when I refresh/reload the page as a link, Hash doesn’t load with the picture, I want Hash to load the corresponding image.

I tried with some Jquery Plugin like Address, BBQ, History but it doesn’t work.

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

                    }
                });

Answer 1

So if there is a hash, we want to pass the information to the elastislide when the page loads.

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]
});

I am assuming here that the hash consists of the index of the image, e.g. #3