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
  • 89 Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by colweb

Dani AI

Generated

Quick diagnosis tied to the original posts: the page never actually let the script find and swap the image element, and Dreamweaver appears to have mangled the markup. The screenshot of the DOM in the first post shows an encoded filename and malformed control links, while the script expects a DOM element selector. Those two mismatches (wrong src/path and a missing matching id) are the most common reasons a one-frame slideshow never advances.

Practical checklist to fix the problem:

  • Give the slide image an id that matches the script selector (do not rely only on the old name attribute).
  • Fix file paths and case sensitivity (remove percent-encoding such as %3A and make sure folder/file names match exactly; servers can be case-sensitive).
  • Replace malformed JS-in-href links with proper event handlers or onclick handlers on real buttons/links; avoid relying on Dreamweaver Design view which can rewrite hrefs.
  • Ensure the image-index variable is initialized within valid bounds so the first automatic step lands on a real array item.
  • Start the auto cycle explicitly (bind on load) and prefer passing a function to the timer rather than a string to avoid eval-style calls.
  • Use the browser console: null-reference errors point immediately to missing ids or wrong element names.

As noted, a setTimeout/setInterval approach that preloads images is robust across browsers. For longer-term maintenance, consider unobtrusive event binding, simple preloading for smoother swaps, or a small proven slider library rather than generated Dreamweaver markup.

Recommended Answers

All 3 Replies

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 Hidden_mistakes

Awesome, thankyou so much :)

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.