rotating photos - how to place text below each

[mikerawlins]

Following the guide here:

http://javascript.internet.com/image-effects/rotating-image.html

I've got a series of photos rotating in sequence every few seconds. I've got one file called banner.js.js with the code shown at bottom of this post. In my main index.html file I have the few lines immediately below. It works, but perhaps it's not done right. How do I place a caption that changes for each photo? Most of the code I've seen to do this seems MUCH more complicated. Thanks!


<p><div align="center">
<!-- <img src="image_jss.gif" name="banner"> -->
<img src="photo_JBG_0315.JPG" name="banner" width="400" height="267">
<div class="slideTitle"> CAPTION TEXT
</div>
</div><p>




<!-- Paste this code into an external JavaScript file named: banner.js.js -->

/* This script and many more are available free online at
The JavaScript Source ::

http://javascript.internet.com

Created by: Lee Underwood ::

http://javascript.internet.com/

*/

var bannerImg = new Array();
// Enter the names of the images below
bannerImg[0]="photo_JBG_0315.JPG";
bannerImg[1]="photo_JBG_3341.JPG";
bannerImg[2]="photo_JBG_3506.JPG";

var newBanner = 0;
var totalBan = bannerImg.length;

function cycleBan() {
newBanner++;
if (newBanner == totalBan) {
newBanner = 0;
}
document.banner.src=bannerImg[newBanner];
// set the time below for length of image display
// i.e., "4*1000" is 4 seconds
setTimeout("cycleBan()", 8*1000);
}
window.onload=cycleBan;

 

[feherke]

Hi

The following code just adds the requested functionality. I do not recommend using it as I generally not recommend using anything originating form that site's ancient scripts.

[b]var[/b] bannerImg [teal]=[/teal] [teal][[/teal]
  [teal][[/teal] [green][i]'photo_JBG_0315.JPG'[/i][/green][teal],[/teal] [green][i]'first caption'[/i][/green] [teal]],[/teal]
  [teal][[/teal] [green][i]'photo_JBG_3341.JPG'[/i][/green][teal],[/teal] [green][i]'second caption'[/i][/green] [teal]],[/teal]
  [teal][[/teal] [green][i]'photo_JBG_3506.JPG'[/i][/green][teal],[/teal] [green][i]'third caption'[/i][/green] [teal]],[/teal]
[teal]];[/teal]

[b]var[/b] newBanner [teal]=[/teal] [purple]0[/purple][teal];[/teal]
[b]var[/b] totalBan [teal]=[/teal] bannerImg[teal].[/teal]length[teal];[/teal]

[b]function[/b] [COLOR=darkgoldenrod]cycleBan[/color][teal]()[/teal]
[teal]{[/teal]
  newBanner[teal]++;[/teal]
console[teal].[/teal][COLOR=darkgoldenrod]log[/color][teal]([/teal]newBanner[teal])[/teal]
  [b]if[/b] [teal]([/teal]newBanner [teal]==[/teal] totalBan[teal])[/teal] [teal]{[/teal]
    newBanner [teal]=[/teal] [purple]0[/purple][teal];[/teal]
  [teal]}[/teal]
  document[teal].[/teal]banner[teal].[/teal]src[teal]=[/teal]bannerImg[teal][[/teal]newBanner[teal]][[/teal][purple]0[/purple][teal]];[/teal]
  document[teal].[/teal][COLOR=darkgoldenrod]getElementsByClassName[/color][teal]([/teal][green][i]'slideTitle'[/i][/green][teal])[[/teal][purple]0[/purple][teal]].[/teal]innerHTML[teal]=[/teal]bannerImg[teal][[/teal]newBanner[teal]][[/teal][purple]1[/purple][teal]];[/teal]
  [COLOR=darkgoldenrod]setTimeout[/color][teal]([/teal][green][i]"cycleBan()"[/i][/green][teal],[/teal] [purple]8[/purple][teal]*[/teal][purple]1000[/purple][teal]);[/teal]
[teal]}[/teal]
window[teal].[/teal]onload[teal]=[/teal]cycleBan[teal];[/teal]

Next time please post your code between [tt][ignore]

[/ignore][/tt] and [tt][ignore]

[/ignore][/tt] TGML tags.


Feherke.

http://free.rootshell.be/~feherke/

 

[mikerawlins]

Yes, the

 tags next time. Thanks for the help. I've got it working with some minor adjustments.

MR

 

[youradds]

You could also try something more along the lines of this, using jQuery:

http://www.mywebsitedesignersblog.com/2011/04/random-banner-rotation-with-jquery/

Much cleaner, and as the other guys said - using stuff from internet.net tends to be a bad idea, as most of that code is many many many years old