NameSilo

Javascript image slideshow

Namecheap AuctionsNamecheap Auctions
SpaceshipSpaceship
SpaceshipSpaceship
Watch

Barrucadu

Established Member
Impact
64
[RESOLVED] Javascript image slideshow

Javascript isn't my forte, so when my dad asked me to put a slideshow on his website I copied one from a tutorial, but it doesn't work.

Code:
<script type="text/javascript">
<!--
var image = new Array();
image[0] = new Image();
image[0].src='thumbnail.php?i=me&f=Party 049.jpg';
image[1] = new Image();
image[1].src='thumbnail.php?i=me&f=party 2 033.jpg';
image[2] = new Image();
image[2].src='thumbnail.php?i=me&f=Picture-066.jpg';
image[3] = new Image();
image[3].src='thumbnail.php?i=me&f=a.jpg';
image[4] = new Image();
image[4].src='thumbnail.php?i=me&f=Picture-056.jpg';
image[5] = new Image();
image[5].src='thumbnail.php?i=ship&f=BoaDeepC-web.jpg';
image[6] = new Image();
image[6].src='thumbnail.php?i=ship&f=Pipe lay.jpg';
image[7] = new Image();
image[7].src='thumbnail.php?i=ship&f=Deep Blue 1.jpg';
image[8] = new Image();
image[8].src='thumbnail.php?i=ship&f=09GroetenvanBiemans101.jpg';
image[9] = new Image();
image[9].src='thumbnail.php?i=ship&f=NormandIstaller.jpg';
image[10] = new Image();
image[10].src='thumbnail.php?i=ship&f=Balder Viking.jpg';
image[11] = new Image();
image[11].src='thumbnail.php?i=ship&f=Deep Blue 2.jpg';
image[12] = new Image();
image[12].src='thumbnail.php?i=ship&f=0805ihc719.jpg';
image[13] = new Image();
image[13].src='thumbnail.php?i=ship&f=normandprogress.jpg';
image[14] = new Image();
image[14].src='thumbnail.php?i=ship&f=Boa Deep C.jpg';
image[15] = new Image();
image[15].src='thumbnail.php?i=misc&f=k-pos-dp2122-275x264.jpg';
image[16] = new Image();
image[16].src='thumbnail.php?i=misc&f=radius_166x213.jpg';
image[17] = new Image();
image[17].src='thumbnail.php?i=misc&f=fanbeam.jpg';
image[18] = new Image();
image[18].src='thumbnail.php?i=misc&f=a_mid-water_arch.jpg';
image[19] = new Image();
image[19].src='thumbnail.php?i=misc&f=TautwireUnit.jpg';
image[20] = new Image();
image[20].src='thumbnail.php?i=misc&f=k-pos-dp3132-300x228.jpg';
image[21] = new Image();
image[21].src='thumbnail.php?i=misc&f=pagehtml_1510200242443679c2cefc2.jpg';
image[22] = new Image();
image[22].src='thumbnail.php?i=misc&f=koordinater.jpg';
image[23] = new Image();
image[23].src='thumbnail.php?i=misc&f=dynposoversikt.jpg';

var step=1;
function slideit()
  {
    document.getElementById("slide").src=image[step].src

    if (step<24)
      step++
    else
      step=1

    setTimeout("slideit()",2500)
  }
slideit();
-->
</script>

The JavaScript is generated by this PHP:
PHP:
function readdirectory($subdirs)
{
  $i=0;
  $javascript = "var image = new Array();\n";
  foreach($subdirs as $subdir)
	{
	  $path = "gallery/{$subdir}/";
	  if (!file_exists($path)) echo "not an existing directory";
	  if (!is_dir($path)) echo $path." isnt a directory";
	  $main_dir = opendir ($path) or die("Error reading ".$path);
	  while ($entry=readdir($main_dir))
		{
		  if(filetype($path."/".$entry)=="file")
			{
			  $javascript .= "image[{$i}] = new Image();\nimage[{$i}].src='thumbnail.php?i={$subdir}&f={$entry}';\n";
			  $i++;
			}
		}
	}
  return array($javascript, $i);
}

$images = readdirectory(array('me', 'ship', 'misc'));
$javascript = "{$images[0]}
var step=1;
function slideit()
  {
    document.getElementById(\"slide\").src=image[step].src

    if (step<{$image[0]})
      step++
    else
      step=1

    setTimeout(\"slideit()\",2500)
  }
slideit();";
 
Last edited:
0
Close
The views expressed on this page by users and staff are their own, not those of NamePros.
GoDaddyGoDaddy
0
Close
If you try it in IE, the JS debugger says that the getElementById part in the slideit function fails. I'm not too sure why, but the slideshow worked when loaded the page and just put "javascript: slideit();" into the address bar.

So, try taking out the slideit(); that you have in head underneath the function definition and add it in like <script type="text/javascript">slideit();</script> somewhere AFTER you have the <img> tag. experiment and try putting it in different places (at the end, after body, etc).
 
0
Close
Wonderful, it's working now. Thank you.
 
0
Close
Glad to be of assistance.
 
0
Close
CatchedCatched

We're social

Escrow.com
Spaceship
Domain Recover
CryptoExchange.com

NamePros updates

Member card: see how many threads a member started
The member card now shows a Threads number, right after Posts. The member card is the box that opens when you point at a name. Profile...
AIVikings
Catchy
  • The sidebar remains visible by scrolling at a speed relative to the page’s height.
Back