Generic Javascript Slideshow

This Javascript is a pretty popular one as a lot of websites have rotating slideshows, especially on the home page.

Example: Here
Javascript: Here

The reason for the script is because when looking for something similar, I could only find IMAGE slideshows, but sometimes you need more than that, hence the Generic Javascript Slideshow. This script takes all of an HTML element’s direct children and makes them into slideshow elements. These children can be images, divs, iframes, paragraphs, tables, or a combination of anything really.

Similar to the Javascript Scroller, a json object is passed to the startSlideshow function. The properties you may configure are:

• id required – The id of the HTML element to use. This element will be the container of the slideshow and all direct children will be the slideshow items.
• width required – The width of the HTML element specified by id.
• height required – The height of the HTML element specified by id.
• speed Default: 1000 – This is the time it should take to transition from one slideshow item to another, in milliseconds.
• delay Default: 0 – This is the amount of time to spend on each item between transitions.
• startDelay Default: 0 – This is the amount of time to delay before any transition starts. Note that this value is in addition to delay for the first transition. For example, with delay at 1000 and startDelay at 2000, the first transition won’t happen until 3 seconds after the page is loaded.
• dualFade Default: false – When true, the item on the bottom will fade out. This significantly adds to the CPU usage. This is explained further below.
• framerate Default: 50 – The higher the value, the faster the animation interval is. Increasing this value will make for smoother but more CPU intensive animation and reducing the value should have the inverse effect. Note that changing this value has side effects for the speed of the scroll. The default value should suffice in most situations.

Now to further explain the dualFade option. By default, the slideshow item fading in is just fading in on top of the previous item while the previous item just is hidden immediate after the fade. This is for efficiency. However, when items are of different height or have some transparency, the previous item can still be seen and so the immediate disappearance is apparent. In the example, the slideshow on the left has the dualFade turned on while the one on the rigth has it turned off. This option makes the previous item also fade out while the new one is fading in. Only turn on this option when needed, as I’ve observed most browsers struggle when rendering two overlapping fading items (even Chrome!). In most cases there shouldn’t be a problem, but especially on older computers, the processor usage when using dualFade is substantial, so again, use only when needed.

Do note that the script should be called after the page has been rendered, or at least after the container is “declared”. Because of this, the container may need some CSS is make it “pretty” while the page is still loading such as the dimensions and overflow: hidden, depending on the other styles in the document.

Also note that that example uses a lot of CSS and ids/classes on the elements which are unrelated to the script, but is used to visually show the slideshow in action. The comments in the example HTML file explain what is necessary to the scripts and what isn’t.

One last tidbit (in case you are using a drop down menu or some other elements on the page with zindex) is that the element fading in has a zindex of 200 while the previous element has a zindex of 100.