How to reload a page on slider navigation click

Question

I've a problem with this slider: I want to make it slider reload the page after I'm clicking the link "next/prev" in the slider or hte thumbnail.

Can someone help me ?

$(function() {
// ======================= imagesLoaded Plugin ===============================
// https://github.com/desandro/imagesloaded

// $('#my-container').imagesLoaded(myFunction)
// execute a callback when all images have loaded.
// needed because .load() doesn't work on cached images

// callback function gets image collection as argument
//  this is the container

// original: mit license. paul irish. 2010.
// contributors: Oren Solomianik, David DeSandro, Yiannis Chatzikonstantinou

$.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="images/ajax-loader.gif"/><img src="images/black.png"/>').imagesLoaded( function() {
                // add options
                _addViewModes();

                // add large image wrapper
                _addImageWrapper();

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

            });

            // 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();
                }
            });

            // set elastislide's current to current
            $esCarousel.elastislide( 'setCurrent', current );

        },
        _addViewModes   = function() {

            // top right buttons: hide / show carousel

            var $viewfull   = $('<a href="#" class="rg-view-full"></a>'),
                $viewthumbs = $('<a href="#" class="rg-view-thumbs rg-view-selected"></a>');

            $rgGallery.prepend( $('<div class="rg-view"/>').append( $viewfull ).append( $viewthumbs ) );

            $viewfull.on('click.rgGallery', function( event ) {
                    if( mode === 'carousel' )
                        $esCarousel.elastislide( 'destroy' );
                    $esCarousel.hide();
                $viewfull.addClass('rg-view-selected');
                $viewthumbs.removeClass('rg-view-selected');
                mode    = 'fullview';
                return false;
            });

            $viewthumbs.on('click.rgGallery', function( event ) {
                _initCarousel();
                $viewthumbs.addClass('rg-view-selected');
                $viewfull.removeClass('rg-view-selected');
                mode    = 'carousel';
                return false;
            });

            if( mode === 'fullview' )
                $viewfull.trigger('click');

        },
        _addImageWrapper= function() {

            // adds the structure for the large image and the navigation buttons (if total items > 1)
            // also initializes the navigation events

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

            }

        },
        _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( current ) );

        },
        _showImage      = function( $item ) {

            // shows the large image that is associated to the $item

            var $loader = $rgGallery.find('div.rg-loading').show();

            $items.removeClass('selected');
            $item.addClass('selected');

            var $thumb      = $item.find('img'),
                largesrc    = $thumb.data('large'),
                title       = $thumb.data('description');

            $('<img/>').load( function() {

                $rgGallery.find('div.rg-image').empty().append('<img src="' + largesrc + '"/>');

                if( title )
                    $rgGallery.find('div.rg-caption').show().children('p').empty().text( title );

                $loader.hide();

                if( mode === 'carousel' ) {
                    $esCarousel.elastislide( 'reload' );
                    $esCarousel.elastislide( 'setCurrent', current );
                }

                anim    = false;

            }).attr( 'src', largesrc );

        },
        addItems        = function( $new ) {

            $esCarousel.find('ul').append($new);
            $items      = $items.add( $($new) );
            itemsCount  = $items.length; 
            $esCarousel.elastislide( 'add', $new );

        };

    return { 
        init        : init,
        addItems    : addItems
    };

})();

Gallery.init();

/*
Example to add more items to the gallery:

var $new  = $('<li><a href="#"><img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="From off a hill whose concave womb reworded" /></a></li>');
Gallery.addItems( $new );
*/
  });

Here is the code for the view

        <noscript>
        <style>
            .es-carousel ul{
                display:block;
            }
        </style>
    </noscript>
    <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">
        <div class="header">
            <a href="http://tympanus.net/Development/Elastislide/"><span>&laquo; Previous Demo: </span>Elastislide</a>
            <span class="right_ab">
                <a href="http://www.flickr.com/photos/smanography/" target="_blank">Images by Shermeee</a>
                <a href="http://creativecommons.org/licenses/by/2.0/deed.en_GB">CC BY 2.0</a>
                <a href="http://tympanus.net/codrops/2011/09/20/responsive-image-gallery/"><strong>back to the Codrops post</strong></a>
            </span>
            <div class="clr"></div>
        </div><!-- header -->

        <div class="content">
            <h1>Responsive Image Gallery <span>A jQuery image gallery with a thumbnail carousel</span></h1>
            <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="#"><img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="From off a hill whose concave womb reworded" /></a></li>

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

        </div><!-- content -->
    </div><!-- container -->

Sorry if my English is not so good, but I really need to solve this.

Answer 1

Well I have no idea why would you do that, but if you want to reload the page every time you click on the Next and Prev buttons, including the Thumbnail you could do something like this:

$(document).ready(function() {
  $('.es-nav span, .es-carousel img').on('click', function() {
    location.reload();
  });
});

This will reload the page when you click on the nav or an image in the thumbnail area.