Member Avatar for Hidden_mistakes

I am trying to get a div to automatically cycle through images using dreamweaver. I have gotten one image to display but nothing happens after this. Can anyone see where i am going wrong?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="Assets/styles.css" rel="stylesheet" type="text/css" />

<script>
NewImg = new Array (
"images/1.jpg",
"images/2.jpg",
"images/3.jpg",
"images/4.jpg",
"images/5.jpg"
); 
/* as many or few images and the path <strong class="highlight"><vb_highlight>to</strong></vb_highlight> them */

var ImgNum = 5;
var ImgLength = NewImg.length - 1;
var delay = 3000; /* Time delay between Slides in milliseconds */
var lock = false;
var run;

function chgImg(direction) {
 if (document.images) {
  ImgNum = ImgNum + direction;
  if (ImgNum > ImgLength) {  ImgNum = 0; }
  if (ImgNum < 0) { ImgNum = ImgLength; }
 document.getElementById('slideshow').src = NewImg[ImgNum];
 }
}

function auto() {
 if (lock == true) { 
  lock = false;
  window.clearInterval(run);
 }
 else if (lock == false) {
  lock = true;
  run = setInterval("chgImg(1)", delay);
 }
}
</script>
</head>


<body>
<div id="Shell">

  <div id="header">
  <img src="Images/images%3A1.jpg" name="slideshow"><br>
	<a href="images<b></b>:chgImg(-1)">Previous</a> &nbsp;|&nbsp; 
	<a href="images<b></b>:auto()">Auto/Stop</a> &nbsp;|&nbsp; 
	<a href="images<b></b>:chgImg(1)">Next</a>
    
    
</div>
  • 2 Contributors
  • 3 Replies
  • 70 Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by colweb
Member Avatar for colweb

Never worked with dreamweaver, so can't say anything about that other than that I never heard anything good about it.

The following code will do a slideshow. You may want to adjust some variables and the images are not in a div here, but in a table. But it is not that hard to change that. And the images used here are very small, (240 by 306px). If yours are bigger just change the size accordingly. The ,6 behind the last image means a delay of 6 seconds.

The script works in IE 5 and up, Firefox 2 and up and probably all others as well.

In the header part:

<script type="text/javascript">
	var slideCache = new Array();

	function RunSlideShow(pictureName,imageFiles,displaySecs) {
		var imageSeparator = imageFiles.indexOf(";");
		var nextImage = imageFiles.substring(0,imageSeparator);
		if (document.all) {
			document.getElementById(pictureName).style.filter="blendTrans(duration=2)";
			document.getElementById(pictureName).filters.blendTrans.Apply();
		}
		document.getElementById(pictureName).src = nextImage;
		if (document.all) {
			document.getElementById(pictureName).filters.blendTrans.Play();
		}
		var futureImages= imageFiles.substring(imageSeparator+1,imageFiles.length) + ';' + nextImage;
		setTimeout("RunSlideShow('"+pictureName+"','"+futureImages+"',"+displaySecs+")",
		displaySecs*1000);
		// Cache the next image to improve performance.
		imageSeparator = futureImages.indexOf(";");
		nextImage = futureImages.substring(0,imageSeparator);
		if (slideCache[nextImage] == null) {
			slideCache[nextImage] = new Image;
			slideCache[nextImage].src = nextImage;
		}
	}
</script>

----------------------------------------------------------------------------------------------------------
In the body part: (class img = border:thin solid yellow; max-width:400px; padding:0;)


<table class="img" align="center">
	<tr>
		<td>
			<img style="" id="foto" src="/images/opening/img01.jpg" height="240" width="306">
		</td>
	</tr>
</table>
<script language="JavaScript" type="text/javascript">
	RunSlideShow("foto","/images/opening/img01.jpg;"
		+ "/images/opening/img02.jpg;"
		+ "/images/opening/img03.jpg;"
		+ "/images/opening/img04.jpg;"
		+ "/images/opening/img05.jpg;"
		+ "/images/opening/img06.jpg;"
		+ "/images/opening/img07.jpg;"
		+ "/images/opening/img08.jpg;"
		+ "/images/opening/img09.jpg;"
		+ "/images/opening/img10.jpg;"
		+ "/images/opening/img11.jpg;"
		+ "/images/opening/img12.jpg",6);
</script>
Member Avatar for colweb

Awesome, thankyou so much :)

Please remember to mark a solved thread as solved. Thank you.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.