If you aren't yet aware of this, we here at Fuse absolutely love challenges. Building highly interactive websites around the jQuery and jQuery UI libraries allows us to create a great experience while eliminating our reliance on flash.
Now, as good as Javascript libraries are at replicating flash features, there are instances where it is hard to look past a good flash component. While there are hundreds of Javascript based slideshow and gallery components with varying feature sets, we have become real fans of SlideShowPro for its adaptable slideshow capabilities. A large feature set and excellent handling of images (and video) makes SlideShowPro a very versatile tool.
When we finally decided SSP was the way to go we took a look at the Drupal modules available to make our lives easier. The SlideShowPro module looked like the obvious choice, but with theme overrides for cck fields and filters and what not, we figured there had to be a more straightforward way. SSP normally takes a custom XML file as an argument to display a list of images, but it also has the ability to read MediaRSS files. Something that views handily has a module to provide support for. It's as simple as creating any kind of view and outputting the file names of the images, choosing a MediaRSS display type and you're in business. This means you can use one node with multiple file attachments, multiple nodes with a cck file upload field, run the images through imagecache, etc....
So let's show you how to make you're own. The variations on how you can get images to SSP are so great that we're just going to show you one implementation using a content type with a single cck file upload field. We're assuming you're comfortable with downloading, installing and enabling modules and building basic views on your own.
Before you get started you'll need: CCK, Views, MediaRSS, a copy of SlideShowPro standalone, and finally a copy of swfobject.
Step 1:
Create your content type and the required filefield with the image widget.
Step 2:
Create a handful of nodes of the content type you setup in step 1 and upload a different image for each one.
Step 3:
Create your slideshow view as a typical node view. Set your filters to only pull the new content type you created and add your image upload field from the 'Content' group using the format pull down to select the 'path to file' option.
Step 4:
Add a new display to your view of type 'Feed' and change the row style to 'Media RSS'. Give your new display a path (this is the path that SSP will use to get the image list) and hit save.
Step 5:
Depending on where you want the slideshow to show up, (block or page) create the appropriate content and in the body add the following:
Step 6:
Put your swfobject somewhere in your themes folder. We usually put ours in a 'js' subfolder of our theme.
Step 7:
Put the slideshowpro.swf and the params.xml files into your themes directory. Again, we usually put ours in a 'swf' subfolder.
Remember to change the paths to the appropriate locations of your files and edit the xmlFilePath to the path you gave your view in step 4.
That's it! Load up the page or block you just created and you should have a brand spankin' new fancy slideshow that you can easily add and remove images from.
While this guide will certainly open up some options for you, its far from "That's it!" in terms of possibilities.
An example of more advanced integration can be seen on Talula Babaton, which we recently launched. It takes what we have outlined here, and adds external navigation and descriptions, which are both managed from the same view! Keep your eyes open for a follow up post where we get a little deeper into customizing SSP.