Image slideshow [SOLVED]

[TheBnl]

Hey,I want to have a slideshow that doesn't slide automatic but it would just show the next image when you click on it. No fading in and out etc. But i do want it to cycle on and on, i coud make an page for every image but i thought, there must be an better way to do it.I didn't found anything on the web, i could only find slideshows with buttons ore tumbnails and fades etc, no simple one's.another problem (or maybe it isn't a problem) is that i need to have three of them on the same page..My skills are very poor when it comes to scripting, but i'm eager to learn.Thanks in advance to anyone who is willing to help a java noobie like me!Bram

[dsonesuk]

what you want to look up in javascript is:arrays - to store image file namesonclick - an event that triggers functionfunction - to run specific command when calledincrement - to increment a value, which can be used as index reference for array items (image file names)document.getElementById("thisimage").src="arrayname[value]"; - to change image to new, only if the value is less than total stored array images, else go to first image.the img will be referenced using<img src="image01.jpg" id="thisimage" onclick="changeimg();" alt="" />

[jeffman]

A basic slideshow is an excellent project for honing JavaScript skills. Challenging, yeah, but not so hard it'll make your head explode, and definitely rewarding when it's done.

[TheBnl]

what you want to look up in javascript is:arrays - to store image file namesonclick - an event that triggers functionfunction - to run specific command when calledincrement - to increment a value, which can be used as index reference for array items (image file names)document.getElementById("thisimage").src="arrayname[value]"; - to change image to new, only if the value is less than total stored array images, else go to first image.the img will be referenced using<img src="image01.jpg" id="thisimage" onclick="changeimg();" alt="" />

Thanks,I'll look into those points.Great starting project indeed ;-)

[TheBnl]

Okay,I made this:the script:

var NumberOfImages = 8var rouwwerk=new Array(); rouwwerk[0]="rouw1.jpg";	   rouwwerk[1]="rouw2.jpg";rouwwerk[2]="rouw3.jpg";rouwwerk[3]="rouw4.jpg";rouwwerk[4]="rouw5.jpg";rouwwerk[5]="rouw6.jpg";rouwwerk[6]="rouw7.jpg";rouwwerk[7]="rouw8.jpg";var imgNumber = 0function NextImage(){	imgNumber++	if (imgNumber == NumberOfImages)		imgNumber = 0	document.images["VCRrouw"].src = img[imgNumber]}

in the body:

<div id="rouwwerk" class="block">	<h1 id="h">rouwwerk</h1>	<A HREF="java script:NextImage()"><IMG SRC="rouw1.jpg" NAME="VCRrouw"></A></div>

But it doesn't work..see any problems?

[ShadowMage]

But it doesn't work..see any problems?

Aside from a number of outdated/bad coding habits? No. Can you be a little more specific about the problem? What does or doesn't happen?EDIT:Oh wait!This:document.images["VCRrouw"].src = img[imgNumber]should be:document.images["VCRrouw"].src = rouwwerk[imgNumber]EDIT2:And if you're interested in where those outdated/bad coding habits are, I'd be happy to tell you and show you how to fix them.

[TheBnl]

Aside from a number of outdated/bad coding habits? No. Can you be a little more specific about the problem? What does or doesn't happen?EDIT:Oh wait!This:document.images["VCRrouw"].src = img[imgNumber]should be:document.images["VCRrouw"].src = rouwwerk[imgNumber]EDIT2:And if you're interested in where those outdated/bad coding habits are, I'd be happy to tell you and show you how to fix them.

Yess!Thank you!It works now! But i think it is bad to start with Javascripting and already be outdated =pCould you please show me where i'm outdated? ;-)

[dsonesuk]

check my original example and use document.getElementById("thisimage").src="arrayname[value]"; instead of the old dot notationdocument.images["VCRrouw"].src = rouwwerk[imgNumber]look into finding the 'length' of array so it will automatically get total of images rather entering manually.

[ShadowMage]

What dsonesuk said.Also, it's a good idea to also end each line statement with a semicolon. I also think it's good practice (not really necessary, but good practice) to always use brackets for if statements. For example, this:

if (imgNumber == NumberOfImages)		imgNumber = 0

would be:

if (imgNumber == NumberOfImages) {   imgNumber = 0;}

When there's only one statement to execute it's perfectly legal to omit the brackets, but if you need to run more than one statement the brackets are required. So, if you always use them, you have less chance of running into problems later. It also makes it easier to read, IMO.

[jeffman]

The first thing I notice is that your file-naming scheme comes very close to embedding the value of imgNumber in the image's src property. This is a great plan, because it creates the opportunity to eliminate the global variable imgNumber entirely. (Global variables are not as evil as some people think, but they can complicate matters down the road.)The whole trick is extracting the number. Notice how every image name begins with the same sequence of characters: "rouw". Watch carefully:

rouwwerk[0] = "rouw1.jpg";	 // basically, what you have nowvar i = rouwwerk[0].substr(4); // returns "1.jpg"i = parseInt(i);			   // returns 1

This is actually the index of the next element. Your work is done!BUT. I assume you'll want a previousImage function also. Life would make a little more sense if you started your image series with "rouw0.jpg", and then your array index and image index will always match. That means your increment/decrement difference will always be 1 (up or down).Be sure to look up String.substr and parseInt.

[jeffman]

Since I've mentioned a previousImage function, BTW, you might consider (1) how such a function might look and (2) how it could easily be combined with nextImage to create a more flexible function that uses half the lines as two separate functions.But first things first. Optimize nextImage till it's as sleek as it can get.

[TheBnl]

Since I've mentioned a previousImage function, BTW, you might consider (1) how such a function might look and (2) how it could easily be combined with nextImage to create a more flexible function that uses half the lines as two separate functions.But first things first. Optimize nextImage till it's as sleek as it can get.

I dont really use a button, my image is the button and the only option is to click on the image and the next will show ;-)Ore do you mean with optimizing the nextImage function everything what happens behind the scenes?

[ShadowMage]

I dont really use a button, my image is the button and the only option is to click on the image and the next will show ;-)Ore do you mean with optimizing the nextImage function everything what happens behind the scenes?

I think DD was under the impression that you were going to have buttons/links to view the previous/next image. But that doesn't appear to be the case, so yes, optimize the nextImage function. Start with the suggestions that dsonesuk, and I have made. Then move on to what DD said about using the image naming as your index.

[TheBnl]

Now i have this, but it doesn't seem to work.I can click on the image but after i clicked it i get an 'error image icon'Is there something wrong in my function?

var NumberOfImages = 8var rouwwerk=new Array(); rouwwerk[0]="rouw0.jpg";	   rouwwerk[1]="rouw1.jpg";rouwwerk[2]="rouw2.jpg";rouwwerk[3]="rouw3.jpg";rouwwerk[4]="rouw4.jpg";rouwwerk[5]="rouw5.jpg";rouwwerk[6]="rouw6.jpg";rouwwerk[7]="rouw7.jpg";var imgNumber = 0function NextImage(){	imgNumber++	if (imgNumber == NumberOfImages)		{imgNumber = 0;}	document.getElementById("rouw").src="rouwwerk[value]";}

in the body:

	<img src="rouw0.jpg" id="rouw" onclick="NextImage();" alt="" />

[ShadowMage]

scientist might be posting this already but remove the quotes in the bolded part of this line:document.getElementById("rouw").src="rouwwerk[value]";EDIT:BTW, you can get rid of the variable NumberOfImages and replace it with rouwwerk.lengthThis is what dsonesuk was hinting at a few posts back. The length property of an array returns the number of elements it contains.

[jeffman]

document.getElementById("rouw").src="rouwwerk[value]";It would seem you took dsonesuk too literally. Replace "value" with "imgNumber" as you originally had it.And as Shadow says, no quotes around rouwwerk[imgNumber]. :)And what has thescientist to add???

[thescientist]

The problem seems to be this:

document.getElementById("rouw").src="rouwwerk[value]";

what is value? And also you are setting the source to the string literal "rouwwerk[value]". I think you meant imgNumber instead. Since you seem to have the meat and potatoes down, let me offer a slight refactor.

var imgIndex = 0;var numImages = 8;var rouwwerk=new Array(); //if you keep the naming convention the same//all you have to do is change numImagesfor(var i = 0; i < numImages; i++){  rouwwerk[rouwwerk.length] = "rouw" + i + ".jpg";};function NextImage(){  imgIndex++;  if (imgIndex == rouwwerk.length)	imgIndex = 0;  document.getElementById("rouw").src=rouwwerk[imgIndex];};

[thescientist]

document.getElementById("rouw").src="rouwwerk[value]";It would seem you took dsonesuk too literally. Replace "value" with "imgNumber" as you originally had it.And as Shadow says, no quotes around rouwwerk[imgNumber]. :)And what has thescientist to add???

:)now let's see if he can get the previous function?

[TheBnl]

Ah tank you guys!My englisch isn't that great and im dislectic,So i quickly read things the way they are

[TheBnl]

The problem seems to be this:

document.getElementById("rouw").src="rouwwerk[value]";

what is value? And also you are setting the source to the string literal "rouwwerk[value]". I think you meant imgNumber instead. Since you seem to have the meat and potatoes down, let me offer a slight refactor.

var imgIndex = 0;var numImages = 8;var rouwwerk=new Array(); //if you keep the naming convention the same//all you have to do is change numImagesfor(var i = 0; i < numImages; i++){  rouwwerk[rouwwerk.length] = "rouw" + i + ".jpg";};function NextImage(){  imgIndex++;  if (imgIndex == rouwwerk.length)	imgIndex = 0;  document.getElementById("rouw").src=rouwwerk[imgIndex];};

That must be the indexing DD was talking about :)Thanks!

[ShadowMage]

That must be the indexing DD was talking about :)Thanks!

That's a little different twist than what DD was getting at, I think, but yeah.

[dsonesuk]

scientist meansfor(var i = 0; i < numImages; i++){ rouwwerk = "rouw" + i + ".jpg";};but if you go that root, you wouldn't need a array at allfunction NextImage(){ imgIndex++; if (imgIndex == numImages) imgIndex = 0; document.getElementById("rouw").src="rouw"+imgIndex+".jpg";}

[ShadowMage]

...you wouldn't need a array at allfunction NextImage(){ imgIndex++; if (imgIndex == numImages) imgIndex = 0; document.getElementById("rouw").src="rouw"+imgIndex+".jpg";}

This is what DD was getting at.

[thescientist]

scientist means

for(var i = 0; i < numImages; i++){  rouwwerk[i] = "rouw" + i + ".jpg";};

but if you go that root, you wouldn't need a array at all

function NextImage(){  imgIndex++;  if (imgIndex == numImages)	imgIndex = 0;  document.getElementById("rouw").src="rouw"+imgIndex+".jpg";}

did I? No I meant it, but I guess it's the same difference using i versus using length. Although yeah, the array could become obsolete depending on the implementation. But I suppose the array method could be useful down the road if you wanted to include a pager at the bottom, i.e. 3 / 7, or if you were using some other method of getting the picures and wanted to display captions or something (thus storing each array index as an object) and so on and so forth....

[ShadowMage]

did I? No I meant it, but I guess it's the same difference using i versus using length. Although yeah, the array could become obsolete depending on the implementation. But I suppose the array method could be useful down the road if you wanted to include a pager at the bottom, i.e. 3 / 7, or if you were using some other method of getting the picures and wanted to display captions or something (thus storing each array index as an object) and so on and so forth....

Or if you wanted to preload the images.