Results 1 to 4 of 4

Thread: Fade in / switch image / fade out functionality not firing at correct time

  1. #1
    Join Date
    Jun 2008
    Posts
    16
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Smile Fade in / switch image / fade out functionality not firing at correct time

    Hello all, I have a script that runs a slideshow of images by fading out the current image, changing the image attributes (src and alt), then fading back in. It works fine on localhost, but when I put it up on the production environment sometimes the old image will fade in, then quickly switch to the new one after fade in has completed. Any suggestions?


    Code:
    $(document).ready(function() {
    
      
    	
    	var images = [
    		'slide-01.jpg',
    		'slide-02.jpg',
    		'slide-03.jpg',
    		'slide-04.jpg',
    		'slide-05.jpg',
    		'slide-06.jpg',
    		'slide-07.jpg',
    		'slide-08.jpg',
    		'slide-09.jpg',
    		'slide-10.jpg',
    		'slide-11.jpg',
    		'slide-12.jpg',
    		'slide-13.jpg',
    		'slide-14.jpg',
    		'slide-15.jpg',
    		'slide-16.jpg'
    	];
    	
    	var imageNames = [
    		'Image 1',
    		'Image 2',
    		'Image 3',
    		'Image 4',
    		'Image 5',
    		'Image 6',
    		'Image 7',
    		'Image 8',
    		'Image 9',
    		'Image 10',
    		'Image 11',
    		'Image 12',
    		'Image 13',
    		'Image 14',
    		'Image 15',
    		'Image 16'
    	];
    	
    	
    	
    	function switchAndAppear(elem, i) {
    					
    		i == images.length - 1 ? i = 0 : i++;
    	
    		$(elem)
    			.attr({
    				"src": 'images/slideshow/' + images[i],
    				"alt": imageNames[i]
    				})
    			.fadeIn(1000, function() {
    				disappear(this, i);
    			});
    	
    	}
    
    	
    		
    	function disappear(elem, i) {
    	
    		setTimeout(
    			function() {
    				$(elem).fadeOut(1000, function() {
    					switchAndAppear(this, i);
    				});		
    			}, 7000);
    	
    	} 
    	
    	
    	
    	// set random initial slideshow image
    	var p = Math.floor(Math.random() * (images.length + 1));
    	
    	$("#gallery-image")
    	.attr({
    		"src" : 'images/slideshow/' + images[p],
    		"alt" : imageNames[p]
    	});
    	
    	
    	
    	// start slideshow
    	$("#gallery-image").delay(4000).fadeOut(1000, function() {
    		switchAndAppear(this, 0);
    	});
    	
    	
    	
    });
    Last edited by tk403; 04-26-2010 at 05:53 PM.

  2. #2
    Join Date
    Nov 2008
    Posts
    40
    Thanks
    2
    Thanked 8 Times in 8 Posts

  3. The Following User Says Thank You to MJH For This Useful Post:

    tk403 (04-26-2010)

  4. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,814
    Thanks
    2
    Thanked 424 Times in 418 Posts

    Default

    your images will take time to load, the images may need to be preloaded
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. The Following User Says Thank You to vwphillips For This Useful Post:

    tk403 (04-26-2010)

  6. #4
    Join Date
    Jun 2008
    Posts
    16
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default

    Thanks that's definitely the problem, just need to preload the images. Much obliged!

Bookmarks

Posting Permissions

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