Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 1 of 1
  1. #1
    Member
    Join Date
    Mar 2016
    Location
    South west uk
    Posts
    81
    Member #
    53465
    Liked
    3 times

    fade in / fade out advice

    Hi,
    I have supplied the full js file below.

    I have added this code starting / ending at line 221-225 but typical it isnt working for me.
    Do you see an issue as to why ?

    Code:
    					$rgGallery.find('div.rg-image').fadeOut(500, function() { //Fade-Out
    									
    					$rgGallery.find('div.rg-image').empty().append //Image change
    
    					}).fadeIn(500); //Fade-In
    Code:
    $(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 + '"/>');
    					
    					$rgGallery.find('div.rg-image').fadeOut(500, function() { //Fade-Out
    									
    					$rgGallery.find('div.rg-image').empty().append //Image change
    
    					}).fadeIn(500); //Fade-In
    					
    					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 );
    	*/
    });

  2.  


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:45 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com