Creating a slideshow

Add the Background Image Slideshow block to any editable area.

Once added, a dialog will pop up enabling you to specify the available options.

Select a File Set: Choose a fileset from the dropdown selector.

Fullscreen Background: Check this box to make the slideshow display in the "body" of the page (ie. full screen)

Minimum Height of Containing Element: If you want the slideshow to display in a containing div (rather than full screen), you need to specify the height of the div in your css. Because this add on uses the background property of the containing div, the containing div will collapse to zero pixels high if there is no other content unless the containing div has a height explicitly set in the css. By specifying a minimum height here, the slideshow will display even if it is the only block in the containing div.  

Image Duration (seconds): Specify how long you would like each image to appear.

Transition Type: Select the effect you would like as the images change (Fade, Slide up, Slide down, Slide left, Slide right)

Transition Speed: The length in milliseconds (thousandths of a second) of the transition effect.


The block has some built in "Ken Burns" type animations that are available on most modern browsers. The Ken Burns effect is a slow zoom or pan with a fade into the next image. Older browsers will fall back to a standard transition (above)

Animation Type: Random, Ken Burns, Ken Burns Up, Ken Burns Down, Ken Burns Left, Ken Burns Right

Animation Transition Speed: The length of the animation effect.

For best results, set the Animation Transition speed to slightly longer than the image duration so the pan/zoom is still happening while the image transitions. This setting is specified in milliseconds (ie. thousandths of a second) so an image duration of 5 seconds looks best with an animation transition speed of 5000-6000 milliseconds.