JavaScript Manually Operated Slideshow Wanted 3

flasher40 · Sep 25, 2007

Hi,

I've worked with JavaScript a lot so I understand its basic concepts, but I'm not a programmer.

I create and distribute a weekly comic strip and want to exhibit past strips on my website in a slide-show format that allows the viewer to manually proceed to the next slide when they have finished reading the current one.

The code found at the site listed below seemed to be close to what I wanted:

http://javascript.internet.com/miscellaneous/basic-slideshow.html

I copied and pasted the code into my editor and made two changes: (1) using .jpg instead of .gif, and (2) changing the folder name from "images" to "color_slides." I placed three image files named 1.jpg, 2.jpg, and 3.jpg into the folder named "color_slides."

My code is as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Slideshow: Color Strips</title>

<SCRIPT LANGUAGE="JavaScript">
NewImg = new Array (
"color_strips/1.jpg",
"color_strips/2.jpg",
"color_strips/3.jpg"
);
var ImgNum = 0;
var ImgLength = NewImg.length - 1;

//Time delay between Slides in milliseconds
var delay = 3000;

var lock = false;
var run;
function chgImg(direction) {
if (document.color_strips) {
ImgNum = ImgNum + direction;
if (ImgNum > ImgLength) {
ImgNum = 0;
}
if (ImgNum < 0) {
ImgNum = ImgLength;
}
document.slideshow.src = NewImg

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

</script>

</head>

<body>
<img src="color_strips/1.jpg" name="slideshow">
<table>
<tr>
<td align="right"><a href="javascript:chgImg(-1)">Previous</a></td>
<td align="center"><a href="javascript:auto()">Auto/Stop</a></td>
<td align="left"><a href="javascript:chgImg(1)">Next</a></td>
</tr>
</table>

</body>
</html>
__________________________________________________

When I try to run the code, the first strip appears, but the buttons don't work to go to the next strip.

Any help figuring out what I need to change will be greatly appreciated. Or if you have another JavaScript code that will do the job more elegantly, I'd love to see it.

Thanks!
Bill

thechasboi · Sep 25, 2007

First off you should use document.getElementById('imageID').src ten you have to use this code to create a source object so the image will allow you to replace it source. This work great I have used this and recommended this in the past.

var imageSRC = new Image();
imageSRC = NewImg[0];
document.getElementById('imageID').src = imageSRC;

where imageID = the id of the image to be changed. You could also do an innerHTML replace that works as well but I recommend the src replace less code.

kaht · Sep 25, 2007

This line is making your code bust:

Code:

if (document.color_strips) {

You have no such element defined on your page so it's not doing anything. I rewrote the script below. I changed the variable names to camel case (just my preference) and used proper indentation to make it much easier to read.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>Slideshow: Color Strips</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">

var imageArray = ["color_strips/1.jpg", "color_strips/2.jpg", "color_strips/3.jpg"]
var currentImg = 0;
var imgLength = NewImg.length - 1;

//Time delay between Slides in milliseconds
var delay = 3000;

var run = null;

function chgImg(direction) {
   currentImg += direction;
   currentImg = (currentImg > imgLength) ? currentImg = 0 : (currentImg < 0) ? currentImg = imgLength : currentImg;
   document.getElementById("slideshow").src = imageArray[currentImg];
}

function auto() {
   if (run) {
      window.clearInterval(run);
      run = null;
   }
   else {
      run = setInterval("chgImg(1)", delay);
   }
}

</script>

</head>

<body>
<img src="color_strips/1.jpg" name="slideshow">
<table>
<tr>
<td align="right"><a href="javascript:chgImg(-1)">Previous</a></td>
<td align="center"><a href="javascript:auto()">Auto/Stop</a></td>
<td align="left"><a href="javascript:chgImg(1)">Next</a></td>
</tr>
</table>

</body>
</html>

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

trollacious · Sep 25, 2007

One I've used for years is this

Code:

<form><input type="button" value="<- Back" onclick="clearInterval(slideshow); clickphoto(-1);">&nbsp;<input type="button" value="Resume Slideshow" onclick="slideshow=setInterval('swapimage()', 10000);">&nbsp;<input type="button" value="Next ->" onclick="clearInterval(slideshow); clickphoto(1);"></form>
<div id="caption" style="font-family:arial; font-size:13;"></div><br>
<img name="photo">

<script language="javascript">

function clickphoto(direction)
{
pi += direction;
pi %= photo.length;
if (pi ==-1) pi = photo.length - 1;
displayphoto(pi);

}

function swapimage()
{
pi++;
pi %= photo.length;
displayphoto(pi);
}

function displayphoto(photonum)
{
document.images['photo'].src=photo[photonum].name;
caption.innerHTML=(photonum + 1) + ' of ' + photo.length + '<br>&nbsp;';
if (photo[photonum].caption.length > 0)
 {
 caption.innerHTML+='<b>' + photo[photonum].caption + '</b>';
 }
caption.innerHTML+='&nbsp;';
}

function Photo(name, caption)
{
this.name=name;
this.caption=caption;
return this;
}

var photo=new Array(), pi=0;

photo[pi++]=new Photo('photoname1','Caption1');
photo[pi++]=new Photo('photoname2','Caption2');
photo[pi++]=new Photo('photoname3','Caption3');

pi=0;

var caption=document.getElementById('caption');
displayphoto(pi);

var images=new Array();

for (var ii=0;ii<photo.length;ii++)
  {
  images[ii]=new Image();
  images[ii].src=photo[ii].name;
  }

var slideshow=setInterval('swapimage()', 10000);

</script>

Lee

flasher40 · Sep 25, 2007

Thanks everyone for your helpful suggestions.

Trollacious, the code you provided is exactly the simple solution I was looking for. I modified it slightly so that only the Back and Next buttons appear and the slides don't change without the user's action. That's appropriate for my application because I don't know how long each individual will need to read the comic script (and, of course, appreciate its humor

).

Bill

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

JavaScript Manually Operated Slideshow Wanted 3

flasher40

Technical User

thechasboi

IS-IT--Management

kaht

Programmer

trollacious

Programmer

flasher40

Technical User

Similar threads

Part and Inventory Search

Sponsor