Simple user controlled plain JavaScript slideshow

Web design and development based in Royston, Hertfordshire, United Kingdom

Griffiths Web Design

Simple user controlled plain JavaScript slideshow

07709 579517

michael@griffithswebdesign.com

Simple user controlled plain JavaScript slideshow

By Michael Griffiths

Created: 19.06.2016 00:00:00, last updated: 01.01.1900 00:00:00

Simple user controlled plain JavaScript slideshow

Today I would like to share with you a simple method of creating a JavaScript slideshow. The slideshow I am going to show you is as simple as it gets. It will display some images and the user will be able to click on the buttons to cycle through the images.

There are many situations where a slide show such as this is required, it’s a very common web development requirement. There are many different tutorials and guides out there instructing you how to build a slide show but most of them are vastly more complex than what we are going to build today.

In a previous article we discussed adding / attaching events in a way that works cross-browser. We will be using that today (If you haven’t had a chance to check it out please go to JavaScript Generic Attach Event Handler). In this article I discussed a light weight cross-browser solution for adding JavaScript events. Head over to the post and have a quick read and grab the code. If, for whatever reason, you are unable to visit that post here is the code:


window.addingEvent = function (event, target, method) {
if (target.addEventListener) {
target.addEventListener(event, method, false);
} else if (target.attachEvent) {
target.attachEvent("on" + event, method);
}
}

Take that code and put it in a JavaScript file to include in our project, mine is called genericEventHandler.js.

Note – I highly recommend reading the post as it explains the code and also how to use it.

Now we need to create a couple of files, one of which is an html page (index.html) and the other is a JavaScript file (imgGal.js)

Open your html page and in the head tags add:


<script src="GenericEventHandler.js" type="text/javascript"></script>
<script src="imgGal.js" type="text/javascript"></script>

These script tags link to our JavaScript files.

Next we will add some mark-up in between the body tags:


<div id="slideShow">
<img name="image_0" width="400" height="400" id="slideimage" alt="Plain vanilla js slide show" src="cent.jpg">
<form name="slideform">
<input id="prevbtn" type="button" value="Previous">
<input id="nextbtn" type="button" value="Next">
</form>

</div>

This html mark-up displays an image and sets it’s ID and name to specific values that the JavaScript will use. It also creates a form which contains the back and forward buttons.

Now that we have written our html we can get onto the interesting stuff, the JavaScript.

Open up imgGal.js and add the following array:


var pics = ['images/cent.jpg', 'images/chick.png', 'images/spaceStation.jpg', 'images/rockandironman.png'];

Note – the ‘images/’ part of each item in the array is the folder in which the images are stored and then comes the file name.

Next we will create the function that moves us forward through the slideshow.


xt we will create the function that moves us forward through the slideshow.

function nxtImg() {
var img = document.getElementById("slideimage");
var imgName = img.name.split("_");
var index = imgName[1];
if (index == pics.length-1) {
index = 0;
} else {
index++;
}
img.src = pics[index];
img.name = "image_" + index;
}

This function will be added to the click event of the next button, I’ll show you in a moment. When the function is called it retrieves the image object from the HTML img tag, by using document.getElementById().

Next, it splits the name attribute of that image at the underscore character, so the function can obtain the number from the ending characters of the name attribute. It stores that number in the index variable.

The next part of the code performs a conditional test that checks whether the value of the index variable is equal to the length of the pics array minus 1. If this condition is true, which means the user has reached the end of the slideshow, then the script sets the value of the index variable to 0, taking the user back to the first slide. If this condition is not true then the coide increments the value of index by 1.

The last 2 lines of our function set the src attribute to the new image and it also sets the name attribute appropriately so that next time the code goes through the function the current index can be determined.

Now that we have discussed the function we need to implement it, so go into your html page and somewhere near the closing body tag add a set of script tags:


<script type="text/javascript">

</script>


In between the opening and closing script tags we need to add our function to the click event of the next button. To do that we need to call our little helper, window.addingEvent. We need to tell our function what event we want to add, the element which we want to add the event to and then we tell it what to do when the event has been raised:


var nxt = document.getElementById("nextbtn");
window.addingEvent('click', nxt, function () {
nxtImg();
});


If you run your page in a browser you’ll see that you can go forward through the slideshow all the way until the last slide at which point it takes you back to the beginning again.
As you can see the previous button currently does nothing, but that is all about to change. We will create a function that is similar to the nextImage() function. We will add this function to the click event of the previous button.

Open up imgGal.js and have a go at creating your prvImg() function. The code will be similar to the nxtImg() function except the conditional. If the index = 0, the slide show is at the first image; therefore, the function needs to loop back to the last image. Otherwise the code moves backward by one index, showing the previous image. Here is the code to move backward through the slide show:


function prvImg() {
var img = document.getElementById("slideimage");
var imgName = img.name.split("_");
var index = imgName[1];
if (index == 0) {
index = pics.length - 1;
} else {
index--;
}
img.src = pics[index];
img.name = "image_" + index;
}


As before we also need to raise the event when the button has been clicked. So go into your html page and find the script block that we used to add the event to the next button. We need to do the same as we did with the next button except with the corresponding button and function, like so:


var prv = document.getElementById("prevbtn");
window.addingEvent('click', prv, function () {
prvImg();
});


Now run your page in a browser and you’ll see that you can cycle through the slide show in whichever direction you wish.

I hope this article was helpful. Thank you for enduring it until the end :) If you have any comments or questions then as always I would love to hear them.


About Michael Griffiths

Web Developer and Social Media Coach

Comments

Comment posted by: okabuluerije

28.07.2019 01:37:50

http://mewkid.net/order-amoxicillin/ - 18 <a href="http://mewkid.net/order-amoxicillin/">Buy Amoxicillin Online</a> kvi.dwhi.griffithswebdesign.com.hyk.aq http://mewkid.net/order-amoxicillin/

Comment posted by: caceceyago

28.07.2019 01:10:16

http://mewkid.net/order-amoxicillin/ - Amoxicillin Online <a href="http://mewkid.net/order-amoxicillin/">Amoxicillin No Prescription</a> rsd.elow.griffithswebdesign.com.jbt.dh http://mewkid.net/order-amoxicillin/