Slideshow array

This page demonstrates how to create an array of slideshows running at random speed.
Basically we use shortcodes with type="slideonly"
To get them properly aligned we need a css trick. This is because if we use align="left" every slideshow will be below the previous one.
So we need a piece of css code before the shortcodes (use the Text editor, not the Visual !!):

<style type="text/css" >
.wppa-container-wrapper{
float:left;
}
</style>
[wppa type="slideonly" album="273" size="0.25"]
[wppa type="slideonly" album="274" size="0.25"]
[wppa type="slideonly" album="275" size="0.25"]
[wppa type="slideonly" album="276" size="0.25"]

As you see, there are a few things to fix. The alignment issue is fixed by removing the newlines between the shortcodes:

[wppa type="slideonly" album="273" size="0.25"][wppa type="slideonly" album="274" size="0.25"][wppa type="slideonly" album="275" size="0.25"][wppa type="slideonly" album="276" size="0.25"]

produces:

So far, So good.

The unwanted behaviour of standard slideshows - like in this example the browse buttons, the border and the links - can be removed by in-line settings, so the code becomes:

<style type="text/css" >
.wppa-container-wrapper{
float:left;
}
</style>
[wppa_set name="wppa_show_ubb" value="no"]
[wppa_set name="wppa_fullimage_border_width" value=""]
[wppa_set name="wppa_slideshow_linktype" value="none"]
[wppa type="slideonly" album="273" size="0.25"][wppa type="slideonly" album="274" size="0.25"][wppa type="slideonly" album="275" size="0.25"][wppa type="slideonly" album="276" size="0.25"]
[wppa_set]

With the following result:

To get them touching without a gap (also vertically), extend the css as follows:

<style type="text/css" >
.wppa-container-wrapper{
float:left;
}
.slide-frame {
margin:0 !important;
}
.theslide img {
width:100% !important;
height:100% !important;
}
</style>

Example with 16 shortcodes:

To get the slideshows running independantly with constantly changing speed, add to the shortcodes:
timeout="random"

Tip: To avoid excessive whitespace, avoid newlines between shortcodes, and between shortcodes and html tags.
Tip: Not too many items per slideshow ( max 20 is a good value ).
Tip: Make sure the photos are not bigger than needed.

If you want spacing between the images and keep everything responsive:
- use a smaller fraction in the shortcode: e.g. size="0.23" leaving 2% space per item;
- make the css for the .wppa-container-wrapper:

<style type="text/css" >
.wppa-container-wrapper{
float:left;
margin:1%; /* 1% left and 1% right add up to the 2% space per item with same space between the rows */
}
</style>

Note: On wppa versions < 8.0, use .wppa-container rather than .wppa-container-wrapper in css specifications.