Help with Random image load from folder directory

[lorne17]

Hello there,

 

I currently have this code working to load in images randomly from a folder, but I have to list each image in the code.

 

Is there a way to code this so if I were to add/remove any images from the folder, the code will still work?

 

                // addLoadEvent 
                function addLoadEvent(func) {
                  var oldonload = window.onload;
                  if (typeof window.onload != 'function') {
                    window.onload = func;
                  } else {
                    window.onload = function() {
                      if (oldonload) {
                        oldonload();
                      }
                      func();
                    }
                  }
                }
                addLoadEvent(swap);
                
                function swap() {
                if (!document.getElementById) { return;}
                preload_image_object = new Image();
                
                rndimg = new Array("<?php bloginfo('template_url'); ?>/Images/SplashImages/image1.jpg", "<?php bloginfo('template_url'); ?>/Images/SplashImages/image2.jpg", "<?php bloginfo('template_url'); ?>/Images/SplashImages/image3.jpg", "<?php bloginfo('template_url'); ?>/Images/SplashImages/image4.jpg", "<?php bloginfo('template_url'); ?>/Images/SplashImages/image5.jpg", "<?php bloginfo('template_url'); ?>/Images/SplashImages/image6.jpg", "<?php bloginfo('template_url'); ?>/Images/SplashImages/image7.jpg", "<?php bloginfo('template_url'); ?>/Images/SplashImages/image8.jpg", "<?php bloginfo('template_url'); ?>/Images/SplashImages/image9.jpg", "<?php bloginfo('template_url'); ?>/Images/SplashImages/image10.jpg", "<?php bloginfo('template_url'); ?>/Images/SplashImages/image11.jpg", "<?php bloginfo('template_url'); ?>/Images/SplashImages/image12.jpg", "<?php bloginfo('template_url'); ?>/Images/SplashImages/image13.jpg", "<?php bloginfo('template_url'); ?>/Images/SplashImages/image14.jpg"); 
                
                
                var numimages = rndimg.length-1;
                var min = 1;
                var max = numimages;
                var count =4;
                var lookup=[], range=max-min+1, num;  
                 for(var i=0; i<count; i++)
                 {
                  while( !isNaN(lookup[ (num = min + Math.floor(Math.random()*range))+'r']) )
                  ;
                  lookup[i]=lookup[num+'r']=num;
                 }
                
                 var j = 0;
                  for(j=0; j<=numimages; j++) 
                      preload_image_object.src = rndimg[j];
                
                var randomimage1=(rndimg[lookup[0]]);
                var randomimage2=(rndimg[lookup[1]]);
                var randomimage3=(rndimg[lookup[2]]);
                var randomimage4=(rndimg[lookup[3]]);
                
                document.getElementById("image1").src =  randomimage1; 
                document.getElementById("image2").src =  randomimage2; 
                document.getElementById("image3").src =  randomimage3; 
                document.getElementById("image4").src =  randomimage4 ; 
                }
                //--> 
            </script>

 

Thanks,

Lorne

[micah1701]

use opendir() and readir()

 

something like this...

 

... all your javascript upto the point where you create your array...
then...

<?php

$dir = bloginfo('template_url') ."/Images/SplashImages/";

// Open a known directory, and proceed to read its contents
if (is_dir($dir)) {
    if ($dh = opendir($dir)) {
        while (($file = readdir($dh)) !== false) {
            $fileList.= "'".$dir.$file."', ";
        }
        closedir($dh);
    }
} 
?>

rndimg = new Array(<?=$fileList ?>); .... rest of your javascript

[lorne17]

Ok so I tried that and I think I got a bit confused on what to take out and what to keep.

 

This is the code I have:

			 <script type="text/javascript"> 
                <!-- 
                // addLoadEvent 
                function addLoadEvent(func) {
                  var oldonload = window.onload;
                  if (typeof window.onload != 'function') {
                    window.onload = func;
                  } else {
                    window.onload = function() {
                      if (oldonload) {
                        oldonload();
                      }
                      func();
                    }
                  }
                }
                addLoadEvent(swap);
                
                function swap() {
                if (!document.getElementById) { return;}
                preload_image_object = new Image();

			<?php

				$dir = bloginfo('template_url') ."/Images/SplashImages/";

				// Open a known directory, and proceed to read its contents
				if (is_dir($dir)) {
					if ($dh = opendir($dir)) {
						while (($file = readdir($dh)) !== false) {
							$fileList.= "'".$dir.$file."', ";
						}
						closedir($dh);
					}
				} 

			?>
                
                
                var numimages = rndimg.length-1;
                var min = 1;
                var max = numimages;
                var count =4;
                var lookup=[], range=max-min+1, num;  
                 for(var i=0; i<count; i++)
                 {
                  while( !isNaN(lookup[ (num = min + Math.floor(Math.random()*range))+'r']) )
                  ;
                  lookup[i]=lookup[num+'r']=num;
                 }
                
                 var j = 0;
                  for(j=0; j<=numimages; j++) 
                      preload_image_object.src = rndimg[j];
                
                var randomimage1=(rndimg[lookup[0]]);
                var randomimage2=(rndimg[lookup[1]]);
                var randomimage3=(rndimg[lookup[2]]);
                var randomimage4=(rndimg[lookup[3]]);
                
                document.getElementById("image1").src =  randomimage1; 
                document.getElementById("image2").src =  randomimage2; 
                document.getElementById("image3").src =  randomimage3; 
                document.getElementById("image4").src =  randomimage4 ; 
                }
                //--> 
            </script>

 

What am I missing?

[micah1701]

the PHP snippet you inserted should create a string that looks like the text in your old Array that you had to create mannually.

 

after the sinppent of PHP, you need to echo out that text into your javascript like:

 

rndimg = new Array(<?php echo $fileList ?>);

 

After you've made that change, refresh your browser and look at its source code. The javascript Array() should look like the old one that you had to type manually.

 

 

[lorne17]

Ok so sorry I am struggling with something that I am sure is so simple.

 

But this is the script I have:

			   <script type="text/javascript"> 
                <!-- 
                                // addLoadEvent
                function addLoadEvent(func) {
                  var oldonload = window.onload;
                  if (typeof window.onload != 'function') {
                    window.onload = func;
                  } else {
                    window.onload = function() {
                      if (oldonload) {
                        oldonload();
                      }
                      func();
                    }
                  }
                }
                addLoadEvent(swap);
               
                function swap() {
                if (!document.getElementById) { return;}
                preload_image_object = new Image();
               
                rndimg = new Array("<?php bloginfo('template_url'); ?>/Images/SplashImages/image1.jpg", "<?php bloginfo('template_url'); ?>/Images/SplashImages/image2.jpg", "<?php bloginfo('template_url'); ?>/Images/SplashImages/image3.jpg", "<?php bloginfo('template_url'); ?>/Images/SplashImages/image4.jpg", "<?php bloginfo('template_url'); ?>/Images/SplashImages/image5.jpg", "<?php bloginfo('template_url'); ?>/Images/SplashImages/image6.jpg", "<?php bloginfo('template_url'); ?>/Images/SplashImages/image7.jpg", "<?php bloginfo('template_url'); ?>/Images/SplashImages/image8.jpg", "<?php bloginfo('template_url'); ?>/Images/SplashImages/image9.jpg", "<?php bloginfo('template_url'); ?>/Images/SplashImages/image10.jpg", "<?php bloginfo('template_url'); ?>/Images/SplashImages/image11.jpg", "<?php bloginfo('template_url'); ?>/Images/SplashImages/image12.jpg", "<?php bloginfo('template_url'); ?>/Images/SplashImages/image13.jpg", "<?php bloginfo('template_url'); ?>/Images/SplashImages/image14.jpg");
               
               
                var numimages = rndimg.length-1;
                var min = 1;
                var max = numimages;
                var count =4;
                var lookup=[], range=max-min+1, num; 
                 for(var i=0; i<count; i++)
                 {
                  while( !isNaN(lookup[ (num = min + Math.floor(Math.random()*range))+'r']) )
                  ;
                  lookup[i]=lookup[num+'r']=num;
                 }
               
                 var j = 0;
                  for(j=0; j<=numimages; j++)
                      preload_image_object.src = rndimg[j];
               
                var randomimage1=(rndimg[lookup[0]]);
                var randomimage2=(rndimg[lookup[1]]);
                var randomimage3=(rndimg[lookup[2]]);
                var randomimage4=(rndimg[lookup[3]]);
               
                document.getElementById("image1").src =  randomimage1;
                document.getElementById("image2").src =  randomimage2;
                document.getElementById("image3").src =  randomimage3;
                document.getElementById("image4").src =  randomimage4 ;
                }
                //-->
            </script>

 

This is the PHP I have:

<?php

$dir = bloginfo('template_url') ."/Images/SplashImages/";

// Open a known directory, and proceed to read its contents
if (is_dir($dir)) {
    if ($dh = opendir($dir)) {
        while (($file = readdir($dh)) !== false) {
            $fileList.= "'".$dir.$file."', ";
        }
        closedir($dh);
    }
} 
?>

rndimg = new Array(<?=$fileList ?>);

 

I don't know what to take out and where to put the PHP in? 

 

Thanks for all the help,

Lorne