One thing I’ve wanted to do for a long time, but haven’t known how, is rotate images on my site. I have some graphics showing work I’ve done in the past that I’d like to show people as they read my website’s blurb and have always been unhappy that everything looks so static.
I believe there’s some truth in the old cliché about a picture being worth a thousand words. What about if I could show ten pictures, then, eh? How good would that be? I want to show people examples of the sort of thing they’d get if they used me and I want to do it quickly, before they even think of clicking somewhere else. So being able to rotate through a series of images is something I’ve always wanted to do.
And thanks to a careful search on Google the other day, now I can! After you read this post, you’ll be able to, as well. I know, I know, I’m a saint. Don’t thank me, just send money. No, seriously. Send money. I’m not joking!
Okay, I am joking. Here’s how you do it. I’m assuming that if you’ve read this far you’ll know what I mean by things like "<head>" and "<body>", yeah? It’s to do with the HTML code that makes up your website.
1. First thing: DON’T PANIC. My coding skills are pathetic on a good day. Everything I’ve written here is stuff I’ve blindly copied from somewhere else. But it works. That’s the only thing that matters to me. If you copy the code below, it’ll work for you, too.
2. Paste the following code into the <head> section of your page. Change the names and paths of your images, but otherwise copy exactly as it is:
<script language="JavaScript" type="text/JavaScript">
// <![CDATA[
function RE_OnLoadHandler()
{
}
// ]]>
var Pic = new Array()
Pic[0] = ‘YourImage/pic1.jpg’
Pic[1] = ‘YourImage/pic2.jpg’
Pic[2] = ‘YourImage/pic3.jpg’
Pic[3] = ‘YourImage/pic4.jpg’
// I’ve given you four pictures there, but of course if you wanted more you’d simply add Pic[4] = ‘YourImage/pic5.jpg’ and so on.
// Set slideShowSpeed (milliseconds) – make it quicker or slower by adjusting this figure:
var slideShowSpeed = 5000
// Duration of crossfade (seconds) – make the fade from one image to another quicker or slower by adjusting this figure:
var crossFadeDuration = 3
// No need to edit
var t
var j = 0
var p = Pic.length
var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}
function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter= "blendTrans(duration=2)"
document.images.SlideShow.style.filter= "blendTrans(duration=crossFadeDuration)"
document.images.SlideShow.filters.blendTrans.Apply()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout(‘runSlideShow()’, slideShowSpeed)
}
</script>
3. Still with me? Okay, next.
4. Make sure the following is put inside your "<body> tag:
onload="runSlideShow()"
So, for example, my web page has this in the tag: <body class="daniboy" onload="runSlideShow()">
5. Decide where you want the rotating images to go on your web page. Put in your starting image and name it "Slideshow". Here’s what I did on my site:
<img src="Images/workpic1.jpg" name="SlideShow" width="519" height="369" />
So where I have an image with the path and name "Images/workpic1.jpg", you’d substitute that for your own. The other images will rotate automatically; you don’t have to specify them here, as they’re already specified above.
6. Finally, put the following code snippet at the very end of the page, just above the </body> tag:
<script language="JavaScript" type="text/javascript">
<!–//
init();
//–>
</script>
And that, itoshii tomodachi, is that. The rotation works in all browsers, as far as I can tell. It’s fine in Firefox, although the transition isn’t fantastically smooth, and looks wonderful in Internet Explorer 6. Check out my business website to see how it looks.
I know that some web designers read this blog, no doubt chuckling at my outmoded ways of doing things and over-reliance on things like JavaScript. But for ignoramuses people like me, easy-to-use snippets of code are a good way to get my website behaving as I want it to behave. Today’s entry is possible because of the K.i.S. Media Group, who uploaded their solution for rotating images onto a JavaScript coding site. I cleaned up their explanation and made it slightly more readable, but it’s basically all down to them. Thank you!
London Marathon 2009 Update: I’m running the London Marathon in April 2009 — or in other words, Dan’s Shockingly Super Run 4 Glory 2009 — to raise money for maggie’s, a cancer caring charity, inspired by my cousin Teresa. If you find this blog in any way useful, please think about donating a small sum — a pound would be just fine — to the appeal on the Run 4 Glory link.
