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 10 of 10
  1. #1
    New Coder
    Join Date
    Jun 2006
    Posts
    62
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Load one by one using jquery

    Hi

    I have a number of images that I want to fade-in in order one by one (using animate and opacity). There will be an unknown number of images as they are coming via a cms/database, so I can't hand code the animation for each.

    Any ideas on how to do this? Maybe with an array? - although I don't really know.

    Cheers!

  • #2
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    You'll need to utilise the callback of each fadeIn() method, nesting them sequentially.

    e.g.
    Code:
    $('#image_1').fadeIn('500',function(){
    		
    	$('#image_2').fadeIn('500',function(){
    			
    		$('#image_3').fadeIn('500',function(){
    				
    			$('#image_4').fadeIn('500',function(){
    					
    				$('#image_5').fadeIn('500',function(){
    						
    					$('#image_6').fadeIn('500',function(){
    							
    						$('#image_7').fadeIn('500',function(){
    								
    							$('#image_8').fadeIn('500',function() {
    								
    								$('#image_9').fadeIn('500',function(){
    		
    									$('#image_10').fadeIn('500');
    		
    								});
    								
    							});
    								
    						});
    							
    					});	
    
    				});
    				
    			});
    			
    		});
    			
    	});
    		
    });
    You'll quite probably need to create that js dynamically, using a db query and some careful nesting.

  • #3
    New Coder
    Join Date
    Jun 2006
    Posts
    62
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks

    I could do it that way, I was just wondering if there is a way to loop through an unordered list maybe?

  • #4
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts
    You could possibly do something like this (warning this is off the top of my head and completely untested)

    Code:
    max_images = $('#image_list li).length() ;
    current_image =0;
    
    $(document).ready(function()
    {
       fadeImage();
     }
    );
    
    function fadeImage()
    {
        curent_image = current_image+1;
       if(current_image<=max_images)
       {
          $('#image_list li').get(current_image-1).fadeIn(500, fadeImage);
      } 
    }

  • #5
    Regular Coder
    Join Date
    Nov 2007
    Location
    Leeds, UK
    Posts
    514
    Thanks
    24
    Thanked 19 Times in 19 Posts
    PHP Code:
    // (C) 2000 www.CodeLifter.com
    // http://www.codelifter.com
    // Free for all users, but leave in this  header
    // NS4-6,IE4-6
    // Fade effect only in IE; degrades gracefully
     
    // =======================================
    // set the following variables
    // =======================================
     
    // Set slideShowSpeed (milliseconds)
    var slideShowSpeed 3000
     
    // Duration of crossfade (seconds)
    var crossFadeDuration 3
     
    // Specify the image files
    var Pic = new Array() // don't touch this
    // to add more images, just continue
    // the pattern, adding to the array below
     
    Pic[0] = '1.jpg'
    Pic[1] = '2.jpg'
    Pic[2] = '3.jpg'
     
     
    // =======================================
    // do not edit anything below this line
    // =======================================
     
    var t
    var 0
    var Pic.length
     
    var preLoad = new Array()
    for (
    0pi++){
       
    preLoad[i] = new Image()
       
    preLoad[i].src Pic[i]
    }
     
    function 
    runSlideShow(){
       if (
    document.all){
          
    document.images.SlideShow.style.filter="blendTrans(duration=2)"
          
    document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
          
    document.images.SlideShow.filters.blendTrans.Apply()      
       }
       
    document.images.SlideShow.src preLoad[j].src
       
    if (document.all){
          
    document.images.SlideShow.filters.blendTrans.Play()
       }
       
    1
       
    if (> (p-1)) j=0
       t 
    setTimeout('runSlideShow()'slideShowSpeed)

    Then in the body onload runSlideShow();

    Change these then add more Following the pattern
    Paths are relative to page
    Pic[0] = '1.jpg'
    Pic[1] = '2.jpg'
    Pic[2] = '3.jpg'

    *** P.S This is not AJAX by no meens

  • #6
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    I thought the web des/dev community had grown out of IE-only thinking.

  • #7
    Regular Coder
    Join Date
    Nov 2007
    Location
    Leeds, UK
    Posts
    514
    Thanks
    24
    Thanked 19 Times in 19 Posts
    Quote Originally Posted by Bill Posters View Post
    I thought the web des/dev community had grown out of IE-only thinking.
    We have but there is only IE that can fade properly(damn Mozilla hurry up),

    And to comment: "Your post is irrelevant. Read the question before posting",

    This is not the case i did read it and if you don't know that php can out put Arrays that go back and learn some thing this is the javascript forum and php outputting an array i did not think i needed to show but here just for you now removed that infraction

    PHP Code:
    $pics = array();
    // MySQL Info to get the images and query run and saved under $query
    // imageSRC is used as the source address from the DB
    while($row mysql_fetch_array($query))
    {
      
    $pics[] = $row['imageSRC'];
    }
    foreach(
    $pics $key as $data){
    echo 
    'Pic['.$key.'] = "'.$data.'";';

    Last edited by barkermn01; 11-10-2008 at 05:57 PM.

  • #8
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts
    Quote Originally Posted by barkermn01 View Post
    We have but there is only IE that can fade properly(damn Mozilla hurry up)
    Please don't pollute threads with your misinformation. It is not helpful to anyone.

  • #9
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    How about something like…?
    Code:
    var i = 0;
    
    $(document).ready(function(){
    
    	$('#these img').hide();
    
    	var int = setInterval("doThis(i)",500);
    
    });
    
    function doThis() {
    
    	var imgs = $('#these img').length;
    
    	if (i >= imgs) {
    		clearInterval(int);
    	}
    
    	$('#these img:hidden').eq(0).fadeIn(1000);
    
    	i++;
    
    }
    
    …
    
    <div id="these">
    
    	<img src="1.png" alt="1" />
    	<img src="2.png" alt="2" />
    	<img src="3.png" alt="3" />
    	<img src="4.png" alt="4" />
    
    </div>
    Last edited by Bill Posters; 11-10-2008 at 07:34 PM.

  • #10
    New Coder
    Join Date
    Jun 2006
    Posts
    62
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi Guys,

    Thanks for the help. NancyJ and Bill your ideas look like just what I'm after.

    I'll give them a go

    Thanks again


  •  

    Tags for this Thread

    Posting Permissions

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