Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    Jul 2011
    Posts
    272
    Thanks
    63
    Thanked 1 Time in 1 Post

    Change Image source on link click

    I'm trying to edit my slideshow script so that once the user clicks the download image button, it changes the source of the current loaded image to an advertisement. The debugging alert works, but the image source does not change. please let me know what I should do to fix this



    Code:
    function downloadImage(){
        alert("working");
       $rgGallery.find('div.rg-image').empty().append('<img src="images/ad.png"/>'); 
    }
    
    $(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} ).appendTo( $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');
    					eventt		= $thumb.data('event');
    					picid		= $thumb.data('id');
    				
    				$('<img/>').load( function() {
    					
    					$rgGallery.find('div.rg-image').empty().append('<img src="' + largesrc + '"/>');
    					
    
    					
    					if( title )
    						$rgGallery.find('div.rg-caption').show().children('p').empty().html( '<br />Download Image: <a href=\'displayImage2.php?event=' + eventt + '&pic=' + picid + '\' onClick=\'downloadImage();\'>Image</a>' );
    					
    					$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
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,226
    Thanks
    15
    Thanked 253 Times in 253 Posts
    Does the download image button, which we cannot see, by any chance submit a form ? If it does the page is reloaded and your new image will not appear.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    It's there, just hard to find.

    Code:
    .html( '<br />Download Image: <a href=\'displayImage2.php?event=' + eventt + '&pic=' + picid + '\' onClick=\'downloadImage();\'>Image</a>' );
    And like you said, when the button (which is actually a link) is clicked on, it redirects the page to displayImage2.php causing the user not see the image changed if the redirection is too fast.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Posts
    272
    Thanks
    63
    Thanked 1 Time in 1 Post
    Quote Originally Posted by glenngv View Post
    It's there, just hard to find.

    Code:
    .html( '<br />Download Image: <a href=\'displayImage2.php?event=' + eventt + '&pic=' + picid + '\' onClick=\'downloadImage();\'>Image</a>' );
    And like you said, when the button (which is actually a link) is clicked on, it redirects the page to displayImage2.php causing the user not see the image changed if the redirection is too fast.
    Actually, it doesn't redirect, it just downloads the image. It's a direct link to a download page. Test it out yourself: http://redroll.com/featured3.php?eve...Festival&img=1
    Last edited by markman641; 10-03-2013 at 02:42 AM.

  • #5
    Regular Coder
    Join Date
    Jul 2011
    Posts
    272
    Thanks
    63
    Thanked 1 Time in 1 Post
    Quote Originally Posted by DrDOS View Post
    Does the download image button, which we cannot see, by any chance submit a form ? If it does the page is reloaded and your new image will not appear.
    it's there!
    Code:
    .html( '<br />Download Image: <a href=\'displayImage2.php?event=' + eventt + '&pic=' + picid + '\' onClick=\'downloadImage();\'>Image</a>' );

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    There is a JS error in the downloadImage() function:

    "Uncaught ReferenceError: $rgGallery is not defined".

    Put the function inside the document ready handler:

    PHP Code:
    $(function() {
        ...
        function 
    downloadImage(){       
           
    $rgGallery.find('div.rg-image').empty().append('<img src="images/ad.png"/>'); 
        }
        ...
        ...
        
    // gallery container
        
    var $rgGallery            = $('#rg-gallery'),
        ...

    }); 
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • Users who have thanked glenngv for this post:

    markman641 (10-03-2013)

  • #7
    Regular Coder
    Join Date
    Jul 2011
    Posts
    272
    Thanks
    63
    Thanked 1 Time in 1 Post
    Quote Originally Posted by glenngv View Post
    There is a JS error in the downloadImage() function:

    "Uncaught ReferenceError: $rgGallery is not defined".

    Put the function inside the document ready handler:

    PHP Code:
    $(function() {
        ...
        function 
    downloadImage(){       
           
    $rgGallery.find('div.rg-image').empty().append('<img src="images/ad.png"/>'); 
        }
        ...
        ...
        
    // gallery container
        
    var $rgGallery            = $('#rg-gallery'),
        ...

    }); 
    still isn't working for some reason. where do you see the errors?

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    In the Javascript console (F12 > Console).

    Ok, keep my original suggestion and then do this:

    Change:

    PHP Code:
    if( title )
        
    $rgGallery.find('div.rg-caption').show().children('p').empty().html'<br />Download Image: <a href=\'displayImage2.php?event=' eventt '&pic=' picid '\' onClick=\'downloadImage();\'>Image</a>' ); 
    to:
    PHP Code:
    if( title ) {
        
    $rgGallery.find('div.rg-caption').show().children('p').empty().html'<br />Download Image: <a href=\'displayImage2.php?event=' eventt '&pic=' picid '\' class="download-link">Image</a>' );
        
    $rgGallery.find('.download-link').on('click'downloadImage);

    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • Users who have thanked glenngv for this post:

    markman641 (10-03-2013)

  • #9
    Regular Coder
    Join Date
    Jul 2011
    Posts
    272
    Thanks
    63
    Thanked 1 Time in 1 Post
    Quote Originally Posted by glenngv View Post
    In the Javascript console (F12 > Console).

    Ok, keep my original suggestion and then do this:

    Change:

    PHP Code:
    if( title )
        
    $rgGallery.find('div.rg-caption').show().children('p').empty().html'<br />Download Image: <a href=\'displayImage2.php?event=' eventt '&pic=' picid '\' onClick=\'downloadImage();\'>Image</a>' ); 
    to:
    PHP Code:
    if( title ) {
        
    $rgGallery.find('div.rg-caption').show().children('p').empty().html'<br />Download Image: <a href=\'displayImage2.php?event=' eventt '&pic=' picid '\' class="download-link">Image</a>' );
        
    $rgGallery.find('.download-link').on('click'downloadImage);

    You sir, are amazing. Thank you! However I am running into one problem
    The image is showing up as a broken image. It is correctly linked, so whats the problem?
    I'm assuming its because the image isn't loaded when the page loads and can't load it after? How would I fix this?

    Code:
    $(function() {
    
        function downloadImage(){    
           $rgGallery.find('div.rg-image').empty().append('<img src="http://redroll.com/images/redrollad2.png"/>'); 
        }
    
    
    	// ======================= 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 current2 = 0;
    		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();
    						current2	= $item.index();
    
    top.history.replaceState('Object', 'Red Roll - ' + eventt, '?event=' + eventt + '&img=' + (current + 1));
    					}
    				});
    				
    				// 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} ).appendTo( $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' );
    top.history.replaceState('Object', 'Red Roll - ' + eventt, '?event=' + eventt + '&img=' + picid);
    						return false;
    					});	
    					
    					$navNext.on('click.rgGallery', function( event ) {
    						_navigate( 'right' );
    top.history.replaceState('Object', 'Red Roll - ' + eventt, '?event=' + eventt + '&img=' + picid);
    						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');
    					eventt		= $thumb.data('event');
    					picid		= $thumb.data('id');
    				
    				$('<img/>').load( function() {
    					
    					$rgGallery.find('div.rg-image').empty().append('<img src="' + largesrc + '"/>');
    					
    
    					
    					if( title )
    						    $rgGallery.find('div.rg-caption').show().children('p').empty().html( '<br />Download Image: <a href=\'displayImage2.php?event=' + eventt + '&pic=' + picid + '\' class="download-link">Image</a>' );
        $rgGallery.find('.download-link').on('click', downloadImage);
    					
    					$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 );
    	*/
    });
    Last edited by markman641; 10-04-2013 at 01:42 AM.

  • #10
    Regular Coder
    Join Date
    Jul 2011
    Posts
    272
    Thanks
    63
    Thanked 1 Time in 1 Post
    bump?

  • #11
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Try delaying the call to the download function.

    PHP Code:
    $rgGallery.find('.download-link').on('click', function() {
        
    setTimeout(downloadImage10);
    }); 
    Increase the time as needed.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #12
    Regular Coder
    Join Date
    Jul 2011
    Posts
    272
    Thanks
    63
    Thanked 1 Time in 1 Post
    Quote Originally Posted by glenngv View Post
    Try delaying the call to the download function.

    PHP Code:
    $rgGallery.find('.download-link').on('click', function() {
        
    setTimeout(downloadImage10);
    }); 
    Increase the time as needed.
    didn't do anything. i feel like the image needs to be loaded at the beginning of the page and then somehow changed.. are you able to change image sources after page load then load the new source?
    Edit: GOT IT! Found on google how to "preload" an image, did that, and it worked!
    Last edited by markman641; 10-08-2013 at 08:23 PM.

  • #13
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Glad you worked it out.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •