While performing general maintainance on a WebPage that I work on for my current job, I was asked to create a second SlideShow on our front page. Now up until then, the single SlideShow worked perfectly. We had no need to re-use it, and as such it was a relatively simple script. It took input relating to the image path, and the URL it was to link to, and that was it. One drawback was the amount of code that had to be used, which involved three blocks of code; one to initialise the script, a second to manage the rotation of the images and links, and a third block to populate the script itself. Re-using this out-of-date script seemed a very brutish solution to a possibly interesting experiment and learning experience, but at the time there were a multitude of other jobs that I had to be getting on with, and so in came the brute.
Now, I have worked with Object Orientated code in C++, PHP, ASP and VB, but never with JavaScript. I had no idea how to go about creating a Class based script, that could be re-used with ease. Up until a few weeks ago, I had concidered JavaScript the lame horse of the family, but now I was to learn quite another side to this latent beast. After a quick Google session, I had mentored myself in the preliminaries of OOP in JavaScript. The next step was obviously to create a replacement script that would meet the needs that I set out for myself: a SlideShow script, that is not only re-usable, but also efficient, clean, and easy to use.
This new SlideShow script involves two blocks of code. The larger of the two describes the behaviour of the Class, manages the information provided and displays the generated output in the specified position. The second, smaller block creates the instances, and populates them with image, caption and link information. This new system that I’ve outlined will be able to handle multiple SlideShows, independant of each other, with a minimum of effort.
When writing this short-but-sweet script, the only problem I ran in to was in the way that JavaScript is called. As soon you call a function, it will execute, regardless of whether the rest of the page has loaded or not. I attempted to get around this using a function to check whether or not the elements to be used were available or not, but due to some strange interactions regarding the setInterval method, I eventually set the to-be solution aside for another time. The rather lazy solution I have gone with was to intialise the SlideShows after the Divs that they are going to use.
Anyway, enough of my yacking. On to the script! This block below is the mind and soul of this small SlideShow, and as such belongs in the HEAD section of the WebPage you will be using it in.
Download: OOP SlideShow Source (JavaScript)
Once the above script is in place, you are going to have to place a Div to hold and display the generated information. You will also need to create a new instance of the slideShow class, and populate it with image URLS, Captions and Links. Below is an example of how to do this.
Download: OOP SlideShow Source (HTML)
What the above snippet will do is first, create a new instance of the slideShow class, defining first of all the target Div (in this case, ‘testSlideShow’) and the delay between the changing of the slides (this is in ms, so 3000 = 3s). Once these initial requirements are met, you can then populate the new SlideShow with images using the addImage function. This function takes the arguements of Image URL, Caption and Link. Image URL is the only arguement that you MUST specify. The other two are optional, providing either a Caption below the image, or a Link to another URL.
This script does however have a few limitations in its current state. The size of the image is not defined, and as such the caption does snap-in upon loading a new image. Images are also not re-loaded, resulting in the ‘image loading’ symbol appearing on the first visit to the page. These are both things I intend on improving upon.
Rock on!
Reference links:
XML.com: Object-orientated JavaScript
http://www.xml.com/pub/a/2006/06/07/object-oriented-javascript.html
JavaScript timers with setTimeout and setInterval
http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/