Griffiths web design based in Royston, Hertfordshire, United Kingdom

 

Simple user controlled plain JavaScript slideshow

Author:   Michael Griffiths

Date created:   19 June 2016

[l]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 [url=http://www.griffithswebdesign.com/Blog/Post/25] JavaScript Generic Attach Event Handler[/url]). 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: [/l] [code]window.addingEvent = function (event, target, method) { if (target.addEventListener) { target.addEventListener(event, method, false); } else if (target.attachEvent) { target.attachEvent("on" + event, method); } } [/code] [l]Take that code and put it in a JavaScript file to include in our project, mine is called genericEventHandler.js. [b]Note –[/b] 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: [/l] [code] [/code] [l]These script tags link to our JavaScript files. Next we will add some mark-up in between the body tags: [/l] [code]
Plain vanilla js slide show
[/code] [l]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: [/l] [code]var pics = ['images/cent.jpg', 'images/chick.png', 'images/spaceStation.jpg', 'images/rockandironman.png'];[/code] [l]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.[/l] [code]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; } [/code] [l]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: [/l] [code][/code] [l]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:[/l] [code]var nxt = document.getElementById("nextbtn"); window.addingEvent('click', nxt, function () { nxtImg(); });[/code] [l]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:[/l] [code]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; }[/code] [l]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:[/l] [code]var prv = document.getElementById("prevbtn"); window.addingEvent('click', prv, function () { prvImg(); });[/code] [l]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. [/l]

About the author

My name is Michael Griffiths, I am a website designer and developer and the owner of Griffiths Web Design. I am based in Royston, Hertfordshire. Most of my work is local, Hertfordshire, Cambridgeshire, Bedfordshire, Essex etc. but that’s not to say I won’t work elsewhere. One of the wonders of modern technology is remote working. So no matter where the client is located it is always possible to connect.

I specialise in creating ASP.NET webforms applications using C#. I use Microsoft SQL Server for database development and on the front end I use Html, CSS and JavaScript. I am also proficient in the use of jQuery and several CSS frameworks.

One of my greatest passions in life is learning. Which is why I chose to pursue a career in web design and development, technology is in a state of constant and rapid evolution which means there is always something new to learn. I also enjoy writing, both fiction and non-fiction.

Comments

Please feel free to leave a comment below:






 
Griffiths Web Design Logo by Michael Griffiths
Griffiths Web Design Logo by Michael Griffiths
Click to go to the top of the page