Including a slide show in Drupal 5
I found this exceptional piece of code on the Dynamic Drive website. It generates a slideshow effect like the one seen to the right of this text. Each image can be set to link to different pages and even open these pages in new windows or tabs. Best of all, it couldn't really be easier to make it work with Drupal. Here is how:
1. Download the slideshow.js file (right click -> save as)
2. Access your site via FTP and create a new directory called 'js' (at root, so the same place you will see subdirectories 'modules', 'profiles' etc..)
3. Upload the attached file into the 'js' folder (this just keeps the JavaScript in a tidy place really)
4. When you create a new page, select the input format as PHP
5. Start your page with "<?php drupal_add_js('js/slideshow.js'); ?>" (excluding quotes). This adds the slideshow JavaScript to your page (NOTE: this works for Drupal 5 but may differ for other releases)
6. When you want a slideshow of images to appear, simply upload the images you wish to include and add the following to the page body where you would like it to appear:
var fadeimages=new Array()
fadeimages[0]=["files/photo1.jpg", "", ""] //plain image syntax for images with no links
fadeimages[1]=["files/photo2.jpg", "http://www.cssdrive.com", ""] //use this for images that include links
fadeimages[2]=["files/photo3.jpg", "http://www.javascriptkit.com", "_new"] //use this for images that include links that you want to open in a new window/tab
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 400, 600, 0, 4000, 1, "R")
</script>
The arguments of fadeshow are:
- The name of the image array you define with "var fadeimages=new Array()"
- The width of the slide show (overflow will be cropped automatically)
- The height of the slide show (overflow will be cropped automatically)
- The border (doesn't work on all browsers. I'd recommend keeping it set to 0)
- The delay between image changes in milliseconds
- 1 = image pauses for rollover. 0 means it doesn't
- Optional argument. If "R" is included, then the order of images is random. If it isn't, then images are shown in order.
7. You can include more than one set of fade images on each page. To do this, simply add the code in step 6 again but with "fadeimages" changed to something else.
This function can even be used to create blocks so it is certainly worth having a look at. I think it adds something to the appearance of sites .
