Simple slide show, want to change some text as images change

JavaScript
1

I’m a real newbie with Javascript, but I’m having fun. I just bought the book, “Simply Javascript” (have only just cracked it so far). I’m reasonably familiar with PHP (I use a lot of it to do simple things). I’m a Web desinger and do custom CSS Websites (I’m fairly new to that too — couple of years or more working with CSS and I’ve never done a table based layout.

That’s my background. Here is what I’m working on and what I want to do. Ref. http://www.clydeconstructionservices.com.
I have a page on that site that shows current projects, and I have a maunally operated slide show (slight modification of the script that runs the show on the “Siding” page). I want to change some of the text as the images advance with the “Next” button. I’ve created an Image Object for each image:
<script type=“text/javascript”>
<!–

var image1=new Image()
image1.src=“/images/photos/completed_projects/P6010122.jpg”;
image1.caption=“A resided home is like a complete facelift.”;

var image2=new Image()
image2.src=“/images/photos/completed_projects/P6080127.jpg”;
image2.caption=“This is the garage”;

var autorun=“false”;
var count=15;
//–>
</script>
There are 15 images in this list.

Here is the slideshow script:

<!–
//variable that will increment through the images
var step=1
imgNum=eval(“step”)

function slideit(){
//if browser does not support the image object, exit.

if (!document.images)

return

document.images.slide.src=eval(“image”+step+“.src”)

if (step&lt;count){
	
step++;

}

else {

step=1
}

var newVar=eval(“autorun”);

if (newVar==true) {

//call function "slideit()" every 3.0 seconds
setTimeout("slideit()",3000)
}

}

slideit()

// –>

I modified it slightly so that I can auto run it on the “Siding” page, and use a button to advance the photos on the “Recent Projects” page.

I think I realize what my main problem is: The page loads once, and runs the script to show the captions, once:
<!–
function showCaption() {

imgNum=eval(“step”);
document.write(“<p>Photo No. “+imgNum+”<br />”+eval(“image”+imgNum+“.caption”)+“</p>”);
}
showCaption()
// –>

But when the button is clicked, nothing will call the showCaption() function again, and I can’t figure out how to call that function as the images advance. I have tried a lot of things with a lot of weird results, one being the tne next caption will display in a blank browser window, without the Webpage! I’m not sure why that happens, but I have a clue.

Is there an easier way to do what I want to do? I only want to show a few lines of text that will describe each image. Seems simple enough to me, but I’m just too new to make it work.

Thanks in advance.
Bill Otis

2

Here is a quick fix, assuming that you just want each caption to show under its corresponding image, as seems to be on that demo page. One problem was that document.write does not update anything selectively, like an image caption - it just wipes everything on the page and starts afresh. So use innerHTML for the caption updating.

The original script posted uses a number of old-fashioned techniques. I took the liberty of removing all uses of eval, and using the id instead of the name attribute. Generally, it is considered overkill nowadays to use eval for this sort of “lightweight” task. There are further ways of modernising the code, such as using an array of meaningful image identifiers, instead of just image1, image2, etc. But anyway, here’s some working code to get things started …

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Slideshow</title>
<style type="text/css">
#wrapper   { width: 750px; }
#wrapper p { text-align: center; }
</style>
</head>
<body>
<div id="wrapper">
  <img src="/images/photos/completed_projects/P6010122.jpg" id="slide" alt="Image 1">
  <p id="slidecaption">A resided home is like a complete facelift.</p>
</div>

<script type="text/javascript">
var image1=new Image();
image1.src="/images/photos/completed_projects/P6010122.jpg";
image1.caption="A resided home is like a complete facelift.";
var image2=new Image()
image2.src="/images/photos/completed_projects/P6080127.jpg";
image2.caption="This is the garage";

var count=2; 
var step=1;

function slideit(){
  if (!document.images||!document.getElementById) return;
  document.getElementById("slide").src=window["image"+step].src;
  document.getElementById("slidecaption").innerHTML=window["image"+step].caption;
  if (step<count){
    step++;
  }
  else {
    step=1;
  }
  setTimeout(slideit,5000);
}
slideit();
</script>

</body>
</html>
3

Thank you so much for your reply. I was kind of thinking of perhaps using innerHTML, as I had experimented with it, and knew what I could do; but, I hadn’t really tried yet for this particular task. Wasn’t really sure how to set it up.

I wlll review the code you provided carefully and see what happens. I’ll report back and let you know. Thanks again!

Bill Otis

4

Exactly what I wanted. I made a couple of modifications to your code to suit my layout, because I didn’t want the captions appearing under the photos, but it works perfectly!

You can see the result here: http://www.clydeconstructionservices.com/Completed/

Now all I have to do is finish adding pictures, write captions, and some better copy. This site will take a while to complete. I have some other ideas for it too. Going to make this one my showpiece for attracting other construction companies … I hope.

I did have a little trouble makeing this auto run… don’t know why. I’ll have to check into it, see what I did wrong, but for this page, I have a button to click to call the next slide. Works great.

Thank you so much, again!

Bill Otis

5

Hi again.

About the problem with auto-running the slideshow … I notice you have the script placed just above the target image element (with id of “slide”). Re-locating the script tag to below all of the elements it targets should fix that. Preferably, place all script tags just before the closing body tag (like in the example I posted above) - so you are assured all elements are in place before the script runs. Otherwise the script can’t find the elements it needs when getElementById() is called. You’ll see a hint to this problem in the browser error console, e.g. Firefox’s console says: “document.getElementById(“slide”) is null”.

One other thing I noticed - this line in comp.css …

img.projects {margin-left: -25px; margin-top: -5px;

… is forcing the slideshow image out of its parent div.

6

Ah ha! I understand. I did move some things around a while back, and I’m not sure why or when I moved the script tag above the target element. I’ll take care of that.

As far as the negative margin goes, you’re correct. I like the offset. Without the negative margin, the picture remains inside the right column, and inside the container that holds the captions, etc. BORING! Hahaha. I needed more interest. I wanted to do something more dramatic. I thought, “What if I throw that image to the left into the sidebar a bit, and offset the shadow as well?” I liked it. I love negative margins!!! This is so much fun, it ought to be illegal!

I plan on a “Previous Image” button on that page along side the “Next Image” I think I can figure out how to do it, based on another article I read somewhere. I may have even saved it.

I’ve added more images to the slide show now. This guy is a good photograher, as well as a good builder. He’s very nice too, and is letting me create as I wish. So far, he likes it.

7

Quick update: You were right, and I got the auto run to work. No problem. Also got rid of the eval() function I was using. Didn’t need it. It was out of my ignorance that I employed it. I had seen it used in a tutorial I had looked at online, and thought I needed it. I didn’t.

Thanks again for your help on this. I have learned a lot.

Regards,
Bill Otis