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!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

JavaScript Manually Operated Slideshow Wanted 3

Status
Not open for further replies.
flasher40

flasher40

Technical User
Apr 13, 2007
80
0
0
US
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:


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
 
Sort by date Sort by votes
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.
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
137
lexer
lexer
Mike Lewis
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid)
Replies
4
Views
256
Mike Lewis
Mike Lewis
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
75
Daniel K
Daniel K
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
122
JScannell
JScannell
JScannell
  • Locked
  • Question
Google Chrome doesn't load my javascript files
Replies
1
Views
113
JScannell
JScannell

Part and Inventory Search

Sponsor

Back
Top