Simple Gallery slide show

As a big fan of Ventrian modules I wanted to create a simple image slide show plugin for my sites. The result uses the Simple Gallery Random module and a little jQuery and CSS.

You can see the final results in action in the sandbox.

Simple Gallery Settings
First, you're going to need to add the Simple Gallery Random module to your page and point it a the Simple Gallery containing the images you want to cycle through. The results are going to look and perform best if all the images are about the same size, although larger images will be cropped.
You can specify as many photos as you want, but remember that these will all be loaded with your page so don't overdo it. I tend to set the Max Count to 5 or so images.

We don't need the slideshow functionality and the "Include jQuery" option will not do anything if Launch Slideshow is not selected, so we'll need to add jQuery manually.

The border style is not important and we'll not be needing the compression settings. In the template setting we going hack a direct path to the image on disk and add a little markup around it.

You'll need to add in your own portal path in place of /Portals/0/ if you are not using the default home portal. The tokens [HOMEDIRECTORY] and [FILENAME] in the URL should have square brackets round them - asomething that so far I haven't worked out how to do.

OK that's it for the module, all being well you should now see 5 images vertically displayed on the page.

CSS

Now we're going to add a little CSS to style the slide show. You can add the following to the skin.css file.
First we are going to add relative positioning to the table containing the Random Module content. This will ensure that our stacked images stay within the table flow.

table.RandomView {
position:relative;
}

Now the image containers. We'll give these specific dimensions and hide any overflow, effectively cropping the image. Adding the absolute positioning will stack all the images into the size of our frame.

.slideShowFrame{
height: 250px;
width: 360px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}

We don't need style the image unless we want to resize it and only crop in one dimension. Just set one of the dimensions to the same value as the containing DIV.

.slideShowFrame img{
width:360px;
}

jQuery
We not actually going to write any jQuery, we're just going to turn to Mike Alsup's excellent Cycle Lite plugin. I'd recommend you download the minified version of the plugin.

I use the Google hosted jQuery libraries, there's a good chance that when they hit your page, the user will already have this in their local cache and save the 19KB download.

The best place for your jQuery to go is at the bottom of your skin content, before the closing body tag.
I use ascx files for skins - so no body tag in the skin file, and I suggest you add it before the Google tracking code if you are using analytics

Copy the cyclelite plugin to your server and update the path to reflect the location and filename you are using.

Missing the minor release number on the jQuery url (i.e. 1.3 not 1.3.2) will ensure you always pick up the latest 1.3.n release.

Our jQuery just consists of invoking the cycle plugin.

The only essential argument is slideExpr, this identifies the actual "slides" in the show.
The timeout value sets the wait between transitions and the speed, the transition speed.
There are several options available and if it's not enough, you can look at the full cycle plugin (follow the same link above) with it's transition effects (or write your own effects!).

Tidying up
So that's more or less it. You might notice if you install the above, that the collection of slides flickers as the images are loaded and before the jQuery kicks in. We can tweak things to avoid this effect by hiding the images until the page has finished loading.

.slideShowFrame img{
display: none;
}

Adding display none to the image style will ensure that the images are not visible when the page is loaded and the flicker is avoided. We would normally have to show the image explicitly with jQuery; in this case, the job is done for use as part of the cycle plugin internals.

We are still left with one final issue. The slideshow won't degrade gracefully if the client does not have javascript enabled, instead there will just be a hole in your skin where at least a static image would nice. We introduced this problem when we fixed the flicker issue. To get round this we can add some extra css if javascript is not loaded.

You'll need to add this to the top of the content of your skin. Strictly speaking this needs to be in your page header and will not validate as transitional XHTML in the body (although in the world of Dotnetnuke, little does).