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{
float:left;
}
</style>
[wppa type="slideonly" album="273" size="0.25"][/wppa]
[wppa type="slideonly" album="274" size="0.25"][/wppa]
[wppa type="slideonly" album="275" size="0.25"][/wppa]
[wppa type="slideonly" album="276" size="0.25"][/wppa]

spinner

spinner

spinner

spinner

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

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

produces:

spinner
spinner
spinner
spinner

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{
float:left;
}
</style>
[wppa_set name="wppa_show_ubb" value="no"][/wppa_set]
[wppa_set name="wppa_fullimage_border_width" value=""][/wppa_set]
[wppa_set name="wppa_slideshow_linktype" value="none"][/wppa_set]
[wppa type="slideonly" album="273" size="0.25"][/wppa][wppa type="slideonly" album="274" size="0.25"][/wppa][wppa type="slideonly" album="275" size="0.25"][/wppa][wppa type="slideonly" album="276" size="0.25"][/wppa]
[wppa_set][/wppa_set]

With the following result:

spinner
spinner
spinner
spinner

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

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

Example with 16 shortcodes:

spinner
spinner
spinner
spinner
spinner
spinner
spinner