Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to create a Slideshow in JavaScript for Beginners

In this article we will learn how to create a slideshow using javascript. Our focus will be to alter the image as well as the content of a div.

Today we will learn how to create a slideshow with Javascript and also take the help of HTML and CSS to do this. Here in the main focus will be to alter the image as well as the content of a div and the use of HTML will be very effective in order to accomplish this. But in this article we will focus on the JavaScript irrespective of the readers having experience in this or not. Please go through some JavaScript basics in order to grab this tutorial in the best possible way.

Let us see where we would need to write the code now. The use of any HTML editor can be taken, It could be Adobe Dreamweaver and also one can make use of simple Notepad as well. We will mainly make use of notepad here.

Listing 1: Write the below code in the Notepad:

<html>
<head>
</head>
<body>

<!--Now below is the place where the code goes in.-->
<!-- Type the code here -->
</body>
</html>

At this point, you would need to access File >> Save as...

Saving the File

Figure 1: Saving the File

Type any name of the file and this needs to be end with .html. The example comprises of slideshowexample.html and then you need to select “All files” as the Type.

Now it is the time to view the output in the browser which could be Firefox or Internet Explorer and the output should be nothing but a blank page.

The best thing about looking for the code time often and again is that it will help you to cross check your code from time to time. If you ignore this step then you probably would end up verifying the entire code in the end and then the troubleshooting and fixing will really be a difficult task.

The line written above <!--Type the code here --> can be removed now. The only thing that needs to be remembered is that we need to place the code between the <body> and </body> tags.

How to create the div`s?

In this tutorial we would need three div`s where in two would be to make hold of the complete slideshow and the other one to take care of the control buttons known by Next, Prev. The point to note about all these divs is that they are known to have the fixed width normally of 500px however any size can be used. This is for the reason that script is capable to detecting any size, only thing we need to take care is that the same width should be used for all of them.

Listing 2: Making use of the overflow:hidden; for all the divs.

<div id="slideshow" example="width:500px;overflow:hidden;">
<div id="slideshowimage" example="width:500px;overflow:hidden;">
</div>
<div id="slideshowcontrols" example="width:500px;overflow:hidden;">
</div>
</div>

Working with Javascript

Listing 3: Below code needs to be written just beneath/below the code used above i.e. before </body>:

<script type="text/javascript">
</script>

These are nothing but starting and the ending tags for the Javascript and now the time is to create between those tags function known by the name of alterimage.

Listing 4: Creating of tags function

<script type="text/javascript">
function alterimage(){
alert("ok");
}
</script>

The need now is to make use of something that can trigger the function and we will see the images being getting altered on accessing the button: Prev and Next. Also this can be done by clicking on the image therefore the first task is to come up these two buttons that can control the slideshow.

Listing 5: Making use of tags and use of onclick event:

<a onclick=”alterimage();”> Prev </a>
<a onclick="alterimage();"> Next </a>

Time now to save the file and then access one button which comes back with a “ok” alert.

Listing 6: The final code looks like below

<html>
<head>
</head>

<body>

<div id="slideshow" example="width:500px;overflow:hidden;">
<div id="slideshowimage" example="width:500px;overflow:hidden;">
</div>
<div id="slideshowcontrols" example="width:500px;overflow:hidden;">
<a onclick="alterimage();">Prev</a>
<a onclick="alterimage();">Next</a>
</div>
</div>

<script type="text/javascript">
function alterimage(){
alter("ok");
}
</script>

</body>
</html>

We will now add the images where in the url of the image is generally stored in an array and any number. We will now add more images to this.

Listing 7: Adding images

var images = new Array;
images[1] = "http://www.electricprism.com/aeron/slideshow/examples/1.jpg";
images[2] = "http://www.phpf1.com/images/maxSlideShow/slideshow.jpg";
images[3] = "http://www.welie.com/patterns/images/slideshow-pro.png";
images[4] = "http://www.vertigo.com/images/detail/SlideShowDetail-1.jpg";
images[5] = "http://www.welie.com/patterns/images/slideshow-picasaweb.png";

Images are supposed to be displayed in the order in which in which they are added and point to note here is that the array needs to be placed prior to the function alterimage. The size of the images doesn’t matter and can be of any size.

Listing 8: Displays how to change the images

<html>
<head>
</head>

<body>

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

<script type="text/javascript">
var images = new Array;
images[1] = "http://www.electricprism.com/aeron/slideshow/examples/1.jpg";
images[2] = "http://www.phpf1.com/images/maxSlideShow/slideshow.jpg";
images[3] = "http://www.welie.com/patterns/images/slideshow-pro.png";
images[4] = "http://www.vertigo.com/images/detail/SlideShowDetail-1.jpg";
images[5] = "http://www.welie.com/patterns/images/slideshow-picasaweb.png";
var presentimage = 1;
function alterimage(alter){
alert(alter);
}
</script>

</body>
</html>

The code mentioned above is used to come up with -1 on accessing the Prev link and Nest link is used to display 1.

We will now make the alert(alter); line delete from the function. In place of this, the following statement will be added:

presentimage += alter;
alert(presentimage);

This looks pretty easy where it is just required to increase the value of presentimage by -1 or 1, post this comes the turn of the final value to be triggered.

Let us see how to display the image when we have already have the count of images to be displayed and the task is just to display them.

So as to achieve this, make use of innerHTML property. This property can help to replace the div content with the one you desire. In order to verify the same, we need to replace the alert(presentimage); statement. This will be replaced with the below code:

document.Element('slideshow').innerHTML = presentimage;

Let us see how this works, the above mentioned statement will look out for the element with the help of the id “slideshowimage” and then the content of the same will be replaced by the present image value.

As a result, it will not be possible for the code to come with a image number that is being presently displayed.

Probably you have noticed that the present 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.

So as to make this happen, we need to put the below statement just after the function alterimage:

alterimage(0);

The point to note here is that the value of the parameter is zero resulting in maintaining the value of present image to 1.

Listing 9: This is how the code should look like:

<html>
<head>
</head>

<body>

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

<script type="text/javascript">
var images = new Array;
images[1] = "http://www.electricprism.com/aeron/slideshow/examples/1.jpg";
images[2] = "http://www.phpf1.com/images/maxSlideShow/slideshow.jpg";
images[3] = "http://www.welie.com/patterns/images/slideshow-pro.png";
images[4] = "http://www.vertigo.com/images/detail/SlideShowDetail-1.jpg";
images[5] = "http://www.welie.com/patterns/images/slideshow-picasaweb.png";
var presentimage = 1;
function alterimage(alter){
presentimage += alter;
document.getElement('slideshow').innerHTML = presentimage;
}
alterimage(0);
</script>

</body>
</html>

Output:

Output displaying different slides that will be shown

Figure 2: Output displaying different slides that will be shown

Conclusion

Hope you had a good learning on the slideshow creating making use of the Javascript. I will come up with more exciting stuff next time.



Software developer with more than 5 years of development on Java, HTML, CSS.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login