The JQuery cycle is an extremely useful tool for building various slideshow effects. The following discusses its use on Drupal 6.x websites which, like all good websites, are running a *NIX operating system. All instructions on this page assume that you're operating as root/sudo on a Linux system and logged in as administrator on Drupal.

Firstly, download the tool and extract in a sensible location. Note that (a) this is a zip file and (b) a zip bomb, which is extremely bad practise. You'll have to have unzip installed on your system and you're better off extracting it in its own directory. e.g.,


mkdir /usr/share/drupal6/sites/all/themes/jquery.cycle
cd /usr/share/drupal6/sites/all/themes/jquery.cycle
wget http://malsup.com/jquery/cycle/release/jquery.cycle.zip
unzip jquery.cycle.zip


The important file which contains all the options, and which is used in this instance is jquery.cycle.all.min.js. Most Drupal 6.x themes will have a javascript directory; copy this file into that directory, e.g., cp jquery.cycle.all.js /usr/share/drupal6/sites/all/themes/conch_0.1.4/conch/js/. In this particular case the third party conch theme is being used which includes the almost ubiqutious SWF object code.

Secondly, you need to have some specific Drupal modules installed, in particular Views, Filefield, the Content Construction Kit (CCK) and ImageCache. Note that the latter has been incorporated into Drupal 7.

Simply extract these ....


cd /usr/share/drupal6/sites/all/modules/
wget http://ftp.drupal.org/files/projects/cck-6.x-2.9.tar.gz
wget http://ftp.drupal.org/files/projects/imagecache-6.x-2.0-beta10.tar.gz
wget http://ftp.drupal.org/files/projects/views-6.x-2.12.tar.gz
tar xvf cck-6.x-2.9.tar.gz
tar xvf imagecache-6.x-2.0-beta10.tar.gz
tar xvf views-6.x-2.12.tar.gz


... and then enable at http://example.com/admin/build/modules.

The next set of steps is to enable the modules appropriately. You may as well enable as many as the submodules as you can, but Filefield and Imagefield in the CCK are absolutely necessary.

Use the ImageCache module to preset a slideshow. Navigate to admin/build/imagecache. Add a new size preset and give it a sensible name; 'slideshow' is a good choice. Then edit the slideshow namespace with a new action, either 'crop' 'resize', or 'scale'. Then give the preset a width and height, whether as a percentage relative to original image size or a pixel value; I prefer the latter.

Next, create a slideshow content type. Navigate to admin/content/types and add a new content type. The name and machine-readable name can be Slideshow and slideshow, respectively. Manage the fields by adding a new field with the label 'Image', name 'field_image', type 'file'. At admin/user/permissions ensure that anonymous users are able to access content (view field_image). Make sure the nodes are published by default.

Now the modules are enabled, the next step is to add some slideshow content with. At least two, and preferably several, nodes need to be created with the slideshow content type (node/add/slideshow). The body can be blank, however most critically an image file must be uploaded. The required title of these images can be as simple as slideshow1, slideshow2, slideshow 3, etc. This will be uploaded to the default path of sites/default/files/imagecache/slideshow.

With modules enabled and content created, the use of views will allow the two to be combined. Navigate to admin/build/views and add a new view. In the view type, select 'node'. In the fields section select 'Content:Image' and 'Node:body'. In the format for 'Content:Image', select 'slideshow image'. In the filters section select 'Node: Published = yes' and 'Node Type = slideshow'. For display select 'Add Display' and select 'Block'.

The final action is to add the View (remember, displayed as a Block) as a block on the page. Simply go to admin/build/block, select the View:Block in question (Slideshow: Block) and select the region where it is wanted. After this sit back and enjoy the results!

Finally, you might want to make changes to the behaviour of your slideshow. You can do so by editing the custom.js file in (for example) /usr/share/drupal6/sites/all/themes/conch_0.1.4/conch/js/ or you can make modifications to the jqyery.cycle.all.min.js file which has plenty of options.

Nota bene: As I'm sure some people might already know, you could probably achieve the same initial effect with GIMP and multiple layers in less time. But then of course, there is the issue of making changes in the future.