Page 1 of 1 Slideshow, rotating images, image-a-go-go, whatever you want to call it, a client will ask for an image or banner to swap out with another image (or more than one), and continue swapping every so often. With Dreamweaver it's pretty easy to throw together some scripting that will accomplish just that for your client. Dreamweaver does most of the heavy lifting, and all you need to do is to paste in a little bit of code, set the images you want to display, how long you want the interval between image swaps to be and you're all ready to send the invoice.
Right, yes you did read that you'd be doing a bit of work up there, but don't worry, once you have this technique down it can take you as little as 20 seconds to get this going, as long as you don't have too many images to pull in. To get your images swapping out on a timed schedule, you'll need just three things to be finished and out the door for the weekend: Dreamweaver, a web page, and a set of images.
Ok, got the requirements together? Great, let's go....
As mentioned earlier, Dreamweaver can do quite a bit of the work for you, I mean, that's what you use it for, right? Dreamweaver has several built in scripts, and a particularly useful set of scripts is its Swap Image and Preload Images behaviors. For our purposes, we really only need Swap Image to change out the images for us, but Preload Images is quite handy for pulling down images in the background so that when it's their turn for display, they pop right up, no waiting, so the technique described will include the preloading of images. We are adding these behaviors to the page so that the code they implement is quickly added by Dreamweaver, and so that the code may be used later for our own devious purposes.
To get started on your rotating images:
Figure 1: Image name/id field on the Property inspector
Figure 2: Tag Selector
Figure 3: Swap Image behavior dialog
Don't look now, but Dreamweaver has added a bunch of code to your page, most of which we'll be leveraging for the image rotation. Well, actually, do look now, as from here on out, we're living in code view until we're done...which won't be very long.
Just above the closing </script> tag in the <head> of your page (and also above //--> if present) , paste the following code:
// Comma separated list of images to rotate
var imgs = new Array('images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg');
// delay in milliseconds between image swaps 1000 = 1 second
var delay = 5000;
var counter = 0;
function preloadImgs(){
for(var i=0;i<imgs.length;i++){
MM_preloadImages(imgs[i]);
}
}
function randomImages(){
if(counter == (imgs.length)){
counter = 0;
}
MM_swapImage('rotator', '', imgs[counter++]);
setTimeout('randomImages()', delay);
}
There are just two places in the code where you need to make edits to reflect your situation, and they are highlighted for you to make them easier to find if you're not JavaScript fanatic. The first area to change is where you specify the locations of the images that you are wanting to rotate. The second area is the amount of delay that you want between image swaps. This time is in milliseconds, that is 5000 means to wait 5 seconds between swaps. The support file uses a delay of 1 second between swaps (1000 ms) in order to exhibit the technique, but much larger values are generally more appropriate, such as 10000 ms, or 30000 ms.
Next, we need to do a little cleaning up to remove some of the code Dreamweaver added during its heavy lifting that isn't needed for the image rotation. Move to the <body> tag and remove the MM_preloadImages() and MM_swapImage() function calls. By default, Dreamweaver also adds in an onmouseover event to the <body> that we also need to pull out. Then replace those calls with the code in the second code block.
Before:
<body onload="MM_preloadImages('images/2.jpg')"
onmouseover="MM_swapImage('rotator','','images/2.jpg',1)">
After:
<body onload="preloadImgs();randomImages();">
Note: If you have other function calls in either of these events, be careful in your removal of the functions, and only pull those mentioned. Also, if by chance you already have these functions applied to the <body>, make sure you only pull out references to the image you browsed to as part of the Swap image application above. If you have any questions about how edit should be made on your page, please don't hesitate to ask in our support forums.
Save your page, you're done. Told you it was quick.
This tutorial has shown you how you can have an image on a page that will have a set of images rotate in on a timer. That's done it, you've gone and completed yet another CommunityMX tutorial, you're now ready to spend probably double what you just did, solely on typing up the invoice for the client. Go have a coffee, and take a break.
Approximate download size: 104k
Page 1 of 1 1
Keywords
rotating images, rotate, swapping, swap image, Dreamweaver, JavaScript
