Creating a Javascript Slideshow part 2

Tuesday, July 27, 2010

Before reading this read the first part. Now, let`s continue:
Add the images
The images URL will be stored in an array, you can use any number of images. I will name this array images, and I will add 5 images to it:
var images = new Array;
images[1] = "http://www.carpages.co.uk/guide/@images/skoda/skoda-octavia.jpg";
images[2] = "http://image.automotive.com/f/reviews/driven/11352663+pheader/0812_01_z+2009_volkswagen_jetta_tDI+front_three_quarter_view.jpg";
images[3] = "http://www.carautoportal.com/car-images/audi/audi-r8-car.jpg";
images[4] = "http://www.roadfly.com/new-cars/wp-content/uploads/gallery/2008-mercedes-benz-c-class/2008-mercedes-benz-C350-sport.jpg";
images[5] = "http://capital.automotive-enewsletters.com/wp-content/uploads/2009/12/bmw.jpg";
Note: The images will be displayed in the order you add them to the array.
Note: Place the array before the changeimage function.
The images can have any size.

Now we need to create a variable what will hold the number of the current image, with initial value of 1, because the first image will be the one with the index 1. Name this variable currentimage
var currentimage = 1;
Place the variable before the changeimage function.

Changing the images
Now begins the real fun :D. The concept is simple: Always the image with the number equal to currentnumber will be shown. When the Next button is pressed the value of currentimage will be increased by 1, or decreased if Prev is pressed.
I will do this by simple adding a parameter (named change) to the changeimage function. The prev button`s parameter will be -1 and the next`s parameter will be 1, and the parameter value will be added to currentimage. First to test the code, change the alert("ok"); to alert(change);After the above changes my code look like this, your code should look the same:
<html>
<head>
</head>

<body>

<div id="slideshow" style="width:400px;overflow:hidden;">
<div id="slideshowimage" style="width:400px;overflow:hidden;">
</div>
<div id="slideshowcontrols" style="width:400px;overflow:hidden;">
<a onClick="changeimage(-1);">Prev</a>
<a onClick="changeimage(1);">Next</a>
</div>
</div>

<script type="text/javascript">
var images = new Array;
images[1] = "http://www.carpages.co.uk/guide/@images/skoda/skoda-octavia.jpg";
images[2] = "http://image.automotive.com/f/reviews/driven/11352663+pheader/0812_01_z+2009_volkswagen_jetta_tDI+front_three_quarter_view.jpg";
images[3] = "http://www.carautoportal.com/car-images/audi/audi-r8-car.jpg";
images[4] = "http://www.roadfly.com/new-cars/wp-content/uploads/gallery/2008-mercedes-benz-c-class/2008-mercedes-benz-C350-sport.jpg";
images[5] = "http://capital.automotive-enewsletters.com/wp-content/uploads/2009/12/bmw.jpg";
var currentimage = 1;
function changeimage(change){
alert(change);
}
</script>

</body>
</html>
The above code should alert -1 if you press Prev and 1 if you press Next

Changing currentimage value
Now, remove the alert(change); line from the function and instead add the following lines:
currentimage += change;
alert(currentimage);
This is very simple, first the value of currentimage is increased by -1 or 1 and then the final value is alerted.

Display the images
Now, that we have the number of the image to show, we need only to display them.
This can be easily done by using the innerHTML property, which can replace the content of a div with whatever you want. First to test it, replace the alert(currentimage); line from your code with the following one:
document.getElementById('slideshowimage').innerHTML = currentimage;
How it works: This line will search for an element with the id
slideshowimage, and it will replace it`s content with the value of currentimage
Now, you code will not alert the current image number, it will write it inside the slideshowimage div.

Starting the function to show the first image, too
Probably you have noticed that the current image number is displayed only after a button is pressed. This is because the function which writes the number starts only at the push of a button. To solve this we need to start the function immediately after the page is loaded.
To do this place the following line after the changeimage function (after } ):
changeimage(0);
Notice that the parameter is 0, so this will not increase the value of currentimage to start from image 1

Now my code look like this (your should look the same):
<html>
<head>
</head>

<body>

<div id="slideshow" style="width:400px;overflow:hidden;">
<div id="slideshowimage" style="width:400px;overflow:hidden;">
</div>
<div id="slideshowcontrols" style="width:400px;overflow:hidden;">
<a onClick="changeimage(-1);">Prev</a>
<a onClick="changeimage(1);">Next</a>
</div>
</div>

<script type="text/javascript">
var images = new Array;
images[1] = "http://www.carpages.co.uk/guide/@images/skoda/skoda-octavia.jpg";
images[2] = "http://image.automotive.com/f/reviews/driven/11352663+pheader/0812_01_z+2009_volkswagen_jetta_tDI+front_three_quarter_view.jpg";
images[3] = "http://www.carautoportal.com/car-images/audi/audi-r8-car.jpg";
images[4] = "http://www.roadfly.com/new-cars/wp-content/uploads/gallery/2008-mercedes-benz-c-class/2008-mercedes-benz-C350-sport.jpg";
images[5] = "http://capital.automotive-enewsletters.com/wp-content/uploads/2009/12/bmw.jpg";
var currentimage = 1;
function changeimage(change){
currentimage += change;
document.getElementById('slideshowimage').innerHTML = currentimage;
}
changeimage(0);
</script>

</body>
</html>
Continue to the third part of the tutorial.

1 comments:

Hmm I seem to be having a problem with making the number appear on the page once its loaded. It does however show up once I click prev/next.. I used external files because I find that it keeps the pages clean and easily understandable.

Heres my page with the code. I dont know what I'm doing wrong.

http://test-test.webs.com/index.htm

Any ideas?

Post a Comment