Slideshow that loads other files as slides

When I first decided to make my site, I envisioned a site that I would just build and then, once complete, would easily maintain with almost no effort. However, at the same time I wanted a lot of flexibility as well.

From my original design, I wanted to use a slideshow on the main page of my site that would cycle through recent things that I wanted to share. I wanted it to be highly customization and functional yet at the same time very maintainable and easily update-able. It was at that point that I decided that I would probably use a jQuery slideshow that loaded html asset files as content of the slideshow. I thought that something like this had already been built so I decided to search for a pre-written slideshow script online. Unfortunately after 2 hours of searching, I couldn’t find a single one. The closest I could find was a slideshow script that loaded can take a list of image files and dynamically load them into a slideshow. However, this wasn’t what I wanted. I wanted the text in my slide show to be select-able and I wanted to ability to insert other types of content such as forms or buttons.

Before we continue…

So before we continue. I just wanted to define what I was looking for and why I was looking for it. What I was looking for was a jQuery slideshow plugin that would take a list of html files as arguments and then proceed to asynchronously load these html files and present them in a nice little slideshow. The reason why I was looking for something like this was because I wanted two things:

1. Flexibility. The ability to do whatever I wanted in each slide. Whether it be displaying a video, an image or text or even all three, I wanted my slideshow to be able to host any type of content because I have a passion for design and I did not want to design under any form of constraints in the future.
2. Maintainability. I wanted this slideshow plugin to be easily maintainable. To be able to add 100 slides if I wanted to while being able to produce each of the 100 slides as productively as I would had there been only one slide. In other words, productivity or difficulty to create/add more slides should not go up (on a per slide basis) as the number of slides increased (although realistically, I would probably only have 2-5 slides).

By loading html files into a slideshow, we a) guarantee full flexibility and b) guarantee that our code will not much messier as we add more slides and that the code will be just as maintainable with 1 slide as it is with 100 slides. Now that I got the explanation of why I (or you) would want to do this, let’s get to work…

The hard part…

Had I been a designer and not a programmer, I probably would have settled for one of the slideshow solutions that can take in a list of divs as input. But I’m not a designer (or at least not just a designer) but a programmer, so I decided to take the tougher but more amusing route, that is roll out my own slideshow plugin in javascript and after a few minutes of thinking I thought up of what I wanted to do.

So first, I thought of the way I would like to pass in files to my slideshow. I decided that I would created a div that represented where my slideshow would go and that I would add each slide as a div inside this div. The slide div(s) would then have a class set to ‘slide’ and the title of the div will be set to the actual file of the slide to load. I chose to do things this way because it allowed me to add more things into the slideshow div other than slides for even more flexibility. I also decided that my slideshow plugin will take in, as an argument, a <ul> element that the plugin will populate with the slide buttons. This would result in something like this in the html of the finished product:

Then I wrote out what will be the skeleton of our script:

Now that we have our skeleton, we need to think about what we need to get our slideshow working.

After a bit of more thinking, what I decided on a list of things to do in order to get this slideshow plugin working:

1. Traverse the div that we will use to host the slideshow to determine what slides to load and where they are located.
2. Load the slides one by one asynchronously.
3. Display our slideshow and transition between slides.
4. Add controls and allow the user to control which slide to show. (Optional)

And also a few things we would probably like want the user of this plugin to have control over. They are: the speed of the slideshow, the speed of the transition and as we discussed earlier, a optional <ul> element that we can populate with the controls to the slideshow. To do this we need to add the following code:

Step 1: Parsing and preparing the slide information

So first, to get the children of the slideshow container div we can write $elem.children(".slide")  which will return a list of child elements that have the ‘slide’ class. Then to traverse the list we can simply use  $.each(). Putting it all together we get:

So in the above code, we first construct an empty list of slide items that we will use to hold information regarding the slide. We then traverse the list of div(s) within the slideshow div that had the ‘slide’ class (as we discussed). Then, for each of the elements, we save the location of the html file to load and then clear the title attribute since we no longer need it. We then do a bit of work to set the css of the div (since we will populate this div with the actual slide later on, we need to set up it’s style so that it displays correctly). Finally we construct an object to store the slide info and add it to our  slides list and with that we are done part 1!

Step 2: Loading the slides

After we have a list of slide information, it’s time to put it to use! To load our slides asynchronously, we are going to user the jQuery function  .load() which will actually do all of the hard work for us (yay :D). Couple that with some clever code and we are already half way done:

So what we are doing here is, we create some variables to keep track of which slide we are currently loading. We also ensure that the first slide we will load is shown on top of all the others ( slideToLoad.holder.css('z-index', 1);). After that we proceed to load the first slide. Now here is where the magic happens. When we load our first slide, we pass  .load() a function to call once the first slide is finished loading. Then this function is called, it checks if there is another slide to load. If there is, it loads it and sets itself as the function to call after the load is done. Otherwise it will simply do nothing, therefore breaking the load chain. Remember that this is all happening asynchronously so we don’t really need to worry how long the load will take.

Step 3: Display our slideshow and transition between slides

We are now venturing into the more difficult and complicated areas of implementing this slideshow so hang on tight! So the main idea in solving step 3 is to first save our current slide position and change this position every so often. The idea isn’t difficult but the implementation might be. For simplicity sakes, I will only show you how you would go about implementing this with a css fade transition (because one, since it uses css, it’s guaranteed to be efficient and produce very smooth animations no matter the device, and two, because it’s relatively simple). Anyways, without further ado I give you:

Alright, before we dissect this massive block of code, we need to first understand how we would do a fade transition. Let’s start with an example. Let’s say we have slide A showing and we want to transition to slide B. Then what we want to do is to put slide B behind slide A then we fade out slide A by animating it’s opacity to 0. And voila we are done.

Now that we know how to do this animation. Let’s write it up. To begin we create two styles. One for when the animation is happening (we turn on transitions so that our opacity change will animate and set opacity to 0) and another style for a static slide (just set opacity to 1). We then write the function to actually perform this change called  changeSlides() which takes in the slide to change to and transitions into that slide. The javascript here is just as we said. We ensure that the old slide is in front of the old slide. We then stop their animations (if they are animating) and apply their respective styles. We then post a function to be run once the animation is over so switch their z-index (we also cancel a scheduled function if there was one).

Next we create a timer object to loop through the slides automatically by using  .setInterval(). We also implement a few functions to control our timer (which we will use later).

Step 4: Adding controls (Optional)

Just using what we have, we can already create a working slideshow; however, the user would have no control over which slide is showing and no way of going to a certain slide! So we must add some controls to give the user control of the slideshow.

Since this block of code is pretty long, I just decided to embed my explanation of the code as comments. Take a good read through. We also need to update the changeSlides() for switching slides so that it will update our controls as well, so our new  changeSlides() will look like (note the highlighted lines):

Finally…

We are done! If you assembled all of this code together you should end up with something like this: