Member Avatar for Hidden_mistakes

I made a slideshow in dreamweaver which works, however when it gets to the end of the cycle it displays a black image before it loops again- how can i get this black 'image' to disappear?

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>
  • 3 Contributors
  • 2 Replies
  • 100 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

— most likely cause: the semicolon-separated string runs out of separators and the parser ends up extracting an empty filename. That empty string is then assigned to the img src, producing the black/broken frame. This matches 's off-by-one/array-bounds intuition. A simple test is to make the image-list string end with a semicolon; if the black frame disappears, the parsing is the culprit.

Two practical fixes:

  • Minimal quick fix: make the list end with a trailing semicolon so the routine always finds a separator (e.g., "...img12.jpg;").
  • Robust fix: split the string into an array once and cycle by index (guarding against empty entries). This avoids fragile substring/indexOf parsing and makes preloading and error handling easier. Example pattern:
var imgs = filesStr.split(';').filter(Boolean);
var i = 0;
var el = document.getElementById('foto');

function showNext() {
  el.src = imgs[i];
  var p = new Image(); p.src = imgs[(i+1) % imgs.length]; // preload next
  i = (i + 1) % imgs.length;
  setTimeout(showNext, secs * 1000);
}

showNext();

For reference, see how indexOf and split behave on strings (MDN): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split.

Extra tips: avoid relying on old IE-only filters (they can introduce flicker); prefer CSS opacity crossfades or two stacked images with CSS transitions. Add width/height attributes to the IMG to prevent layout jumps, and use onerror on the IMG to skip or replace broken sources (MDN: ). 's point about using a well-tested slideshow library is valid if maintenance and cross-browser polish are priorities.

Recommended Answers

All 2 Replies

Member Avatar for MoonTraveller

Do you have a URL with this slideshow? It's easier to debug that way.

It's even easier if you use a script that already works in all browsers. I use this one and you get a free license if your site is a personal/non-profit one.

Member Avatar for almostbob

have not debugged the code, hate javascript, mess it up badly

could it be something simple like,
the size of the array of images is x, but the images are image[0] to image [x-1]
so the script is trying to display image[x] that does not exist and not displaying image[0] that does exist

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.