javascript - How to reload a page on slider navigation click -
i've problem this slider: want make slider reload page after i'm clicking link "next/prev" in slider or hte thumbnail.
can me ?
$(function() { // ======================= imagesloaded plugin =============================== // https://github.com/desandro/imagesloaded // $('#my-container').imagesloaded(myfunction) // execute callback when images have loaded. // needed because .load() doesn't work on cached images // callback function gets image collection argument // 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, reset src. if (this.complete || this.complete === undefined){ var src = this.src; // webkit hack 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'), // carousel items $items = $escarousel.find('ul > li'), // total number of items itemscount = $items.length; gallery = (function() { // index of current item var current = 0, // mode : carousel || fullview mode = 'carousel', // control if 1 image being loaded anim = false, init = function() { // (not necessary) preloading 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 carousel if( mode === 'carousel' ) _initcarousel(); }, _initcarousel = function() { // using 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 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 structure large image , navigation buttons (if total items > 1) // initializes 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 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 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 large image associated $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 add more items gallery: var $new = $('<li><a href="#"><img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="from off hill concave womb reworded" /></a></li>'); gallery.additems( $new ); */ }); here code 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>« previous demo: </span>elastislide</a> <span class="right_ab"> <a href="http://www.flickr.com/photos/smanography/" target="_blank">images shermeee</a> <a href="http://creativecommons.org/licenses/by/2.0/deed.en_gb">cc 2.0</a> <a href="http://tympanus.net/codrops/2011/09/20/responsive-image-gallery/"><strong>back codrops post</strong></a> </span> <div class="clr"></div> </div><!-- header --> <div class="content"> <h1>responsive image gallery <span>a jquery image gallery 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 hill 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 english not good, need solve this.
well have no idea why that, if want reload page every time click on next , prev buttons, including thumbnail this:
$(document).ready(function() { $('.es-nav span, .es-carousel img').on('click', function() { location.reload(); }); }); this reload page when click on nav or image in thumbnail area.
Comments
Post a Comment