Tuesday, March 29, 2016

My JavaScript Slideshow Program

My JavaScript Slideshow Program
I might as well go ahead and explain my slideshow program now. It's a very simple program, but it may be unique in some ways.

I know that there is probably a preset method for making slideshows in HTML by now, but I don't change my videos with any preset methods, I control all of the movement through my program with my own variables and logic. It is more complicated than using a preset method but it leaves more room for development within the same function.

Perhaps I tried to explain this before at some time in the past. In order to have your iframe changing sources like a slideshow, you need first to tag your iframe with an 'ID' such as 'iframeid'. Then you must store all of its alternate sources in an array. They have a new way of setting up arrays now that is actually much more sensible than the way I was first shown. Then you need to assign the array to a string variable such as 'videos' or something. When you do that, the computer sees your variable as an array: videos[0], videos[1], videos[2], etc. From there you need another variable to use as the video index number, in order to control the action of your slideshow. I almost always choose the letter 'b' for my numeric variables. I just like it. Plus it stands for 'busy'. The movement is to either add one to the number in the square brackets or to subtract one from it, depending on where the user clicks. Then if that index number has traveled all the way through the list of videos in your array, you must restore it to its initial value, in order to bump the user back to the beginning or the end of the slideshow.

If I were to organize only the movement of my index variable back through my array into a function, it would look like this:

b=0

function createSelfSubtractingIndexVariable(){
if (b>0&&b<=videos.length-1){
b-=1
}else{
b=video.length-1
}
}

(Sorry I had the b turning to 0 inside the function in my first example.)

Obviously, I used an adding one for the 'step back' link and the subtracting one for the 'step forward' link. Then all I needed to do was put this variable into the square brackets of my array variable as the closing action of my function and voila. This vital statement, too, has changed a bit from what I learned, but I agree with the change. Back in my day, a scripted HTML object like that would be referenced through the style object with document.all.iframename.src=videos[b]. This is backward compatible and would cross platform well onto older computers. But the new way of referencing named objects on a web page is with document.getElementById('iframeid').src=videos[b].

Before you think I've done all that extra algebra for nothing, consider my current needs. Now I must add text to my slideshow to tell the user the date of each video. So I must add another function to my program. As long as all of the movement through my program is controlled by one variable, the same variable can now be used to keep other functions in line with it. So I won't need to write a whole new function to have changes in text accompanying changes in iframe sources. I'll just store those dates the same way I stored my iframe sources and summon them with the same variable in the same program: document.getElementById('videoDate').innerHTML=dates[b]. Thanks to keeping my program free of too many preset methods, it will be a snap to add more functions to it to suit my growing needs.

You can see this program in its initial form here: Slideshow Program. I'm still using the hash symbol (#) to keep the page anchored for my experiments, but I'll get rid of it later.
  
More Statements Scripts Songs
© 2016. Statements by David Skerkowski. All rights reserved.

No comments:

Post a Comment