DHTML JavaScript Random Order Slideshow with Messages Animation Code

Random Order Slideshow with Messages

This slideshow displays your slides and the corresponding messages in random order. It automatically starts as soon as the web page has been loaded. The unique preload function caches the next slide in line as you're viewing the current. This ensures a smooth transition even if you use millions of slides! Just put the slideshow into a HTML table-cell in order to place it into the right position. IE 4x users will see special transition effects between the slides. Cross-browser: works with Internet Explorer4x/5x/6x and Netscape Navigator 4x/6x.

Configuration

Step 1: Open your web page. Insert the following code anywhere between the <body> tags of your web page:

<SCRIPT>
// CREDITS:
// Random Order Slideshow with Messages
// by Urs Dudli and Peter Gehrig 
// Copyright (c) 2002 Peter Gehrig and Urs Dudli. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.24fun.com & http://www.designerwiz.com
// info@24fun.com
// 1/8/2002

// IMPORTANT: 
// If you add this script to a script-library or a script-archive 
// you have to insert a a highly visible link to http://www.24fun.com
// right into the webpage where the script will be displayed.

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION STARTS HERE
///////////////////////////////////////////////////////////////////////////

// Replace the URLs of the slides and the corresponding messages.
// Please note that the URL and the correponding message are separated by "|".
// Watch how the "," and the " " are set!
// You may add as many slides as you like.
// IMPORTANT: Do not use the return-key to break the lines!!!
var slideshow=new Array("../slideshowmulti/sampleholiday01.jpg|Time to relax.","../slideshowmulti/sampleholiday02.jpg|Yes, that looks like holiday!","../slideshowmulti/sampleholiday03.jpg|Colorize your house.","../slideshowmulti/samplewomen01.jpg|I love my hat.","../slideshowmulti/samplewomen02.jpg|Who is stronger?","../slideshowmulti/samplewomen03.jpg|Women are beautiful.","../slideshowmulti/samplecarneval01.jpg|Hey, let\'s go to Rio.","../slideshowmulti/samplecarneval02.jpg|Is this Rio? I think not!","../slideshowmulti/samplecarneval03.jpg|It\'s rather the end of carneval")

// the font-family of the messages
var fntfamily="Verdana"

// the font-size of the messages (ranging from 1 to 6)
var fntsize=1

// the font-color of the messages 
// instead of "yellow" you also could write "FFFF00"
var fntcolor="yellow"

// the background-color of the messages
// instead of "black" you also could write "000000"
var bgrndcolor="black"

// the width of the slides (pixels)
var imagewidth=238

// the height of the slides (pixels)
var imageheight=156

// the minimum interval between each slide (seconds)
var standstill=4

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////////////////

// do not change the code below
var imgstop=0
var imgsleft=0
var mestop=imageheight
var mesleft=0
var firstslide=true
var starttime
var nowtime
var imgurl=new Array()
var message=new Array()
var imgurlandmessagearray=new Array()
var imgurlandmessage
var imgpreload=new Array()
var playertop=0
var playerleft=0
var i_imgs=0
var i_loop=0
var i_preloadloop=0
var i_transition=0
var timerrotate=false
var timercheck=false
var contentimg
var contentmes
var slideshowlength=slideshow.length

var topdivheight=imageheight+40

var ns6=document.getElementById&&!document.all?1:0
var standstill=standstill*1000

function init() {
    firstslide=true
    i_imgs=0
    i_loop=0
    i_preloadloop=randommaker(slideshowlength)
    if (timerrotate) {
        clearTimeout(timerrotate)
        clearTimeout(timercheck)
    }
    imgurl=new Array
    message=new Array
    for (i=0;i<=slideshow.length-1;i++) {
        imgurlandmessage=slideshow[i].split("|")
        imgurl[i]=imgurlandmessage[0]
        message[i]=imgurlandmessage[1] 
    }

if (document.all) {
        imgs.innerHTML=""
        mes.innerHTML=""
	    document.all.imgs.style.posTop=imgstop
        document.all.imgs.style.posLeft=imgsleft
		document.all.mes.style.posTop=mestop
        document.all.mes.style.posLeft=mesleft
        checkpreloadtime()
        preloadimage()
        checkifloaded()
    }
    if (ns6) {
        document.getElementById('imgs').innerHTML=""
        document.getElementById('mes').innerHTML=""
        document.getElementById('imgs').style.top=imgstop
        document.getElementById('imgs').style.left=imgsleft
        document.getElementById('mes').style.top=mestop
        document.getElementById('mes').style.left=mesleft
        checkpreloadtime()
        preloadimage()
        checkifloaded()
    }
	if (document.layers) {
        document.topdiv.document.imgs.document.write("")
        document.topdiv.document.imgs.document.close()
        document.topdiv.document.mes.document.write("")
        document.topdiv.document.mes.document.close()
	    document.topdiv.document.imgs.top=imgstop
        document.topdiv.document.imgs.left=imgsleft
		document.topdiv.document.mes.top=mestop
        document.topdiv.document.mes.left=mesleft
        checkpreloadtime()
        preloadimage()
        checkifloaded()
    }
}

function checkifloaded() {   
   if (imgpreload.complete) { 
        nowtime=new Date()
        nowtime=nowtime.getTime()
        nowtime=nowtime-starttime
        var interval=standstill-nowtime
        if (interval<=0 ) {
            interval=1
        }
        if (firstslide) {
            interval=1
            firstslide=false
        }
        if (i_preloadloop==i_loop) {
            interval=1
        }
        timerrotate=setTimeout("rotateimages()", interval)
   }
   else {
        timercheck=setTimeout("checkifloaded()", 100)
   }
}

function preloadimage() { 
	imgpreload=new Image()
	imgpreload.src=imgurl[i_preloadloop]
}

function rotateimages() {
    i_loop=i_preloadloop
    i_preloadloop=randommaker()  
    checkpreloadtime()
    preloadimage()
    getcontent()
    if (document.all) {
        imgs.filters[i_transition].apply()
        imgs.innerHTML=contentimg
        imgs.filters[i_transition].play()
        i_transition++
        if (i_transition>21) {i_transition=0}
        mes.innerHTML=contentmes
    }    
    if (ns6) {
        document.getElementById('imgs').innerHTML=contentimg
        document.getElementById('mes').innerHTML=contentmes
    }
    if (document.layers) {
        document.topdiv.document.imgs.document.write(contentimg)
        document.topdiv.document.imgs.document.close()
        document.topdiv.document.mes.document.write(contentmes)
        document.topdiv.document.mes.document.close()
    }
    i_loop++
    checkifloaded()    
}

function randommaker() {		
	rand=Math.floor(slideshowlength*Math.random())
    return rand

}

function getcontent() {
    contentimg="<img src='"+imgurl[i_loop]+"'>"
    contentmes="<table cellpadding=2 cellspacing=0 border=0 bgcolor="+bgrndcolor+" width="+imagewidth+"><tr><td><font size="+fntsize+" color="+fntcolor+" face="+fntfamily+">"+message[i_loop]+"</font></td></tr></table>"
}

if (document.all) {
    document.write('<div id="topdiv" style="position:relative;width:'+imagewidth+'px;height:'+topdivheight+'px">')
    document.write('<div id="mes" style="position:absolute;"> </div>')
    document.write('<div id="imgs" style="position:absolute;filter: revealTrans(Transition=1, Duration=2) revealTrans(Transition=2, Duration=2) revealTrans(Transition=3, Duration=2)  revealTrans(Transition=4, Duration=2)  revealTrans(Transition=5, Duration=1)  revealTrans(Transition=6, Duration=2)  revealTrans(Transition=7, Duration=2)  revealTrans(Transition=8, Duration=1)  revealTrans(Transition=9, Duration=2)  revealTrans(Transition=10, Duration=1)  revealTrans(Transition=11, Duration=2)  revealTrans(Transition=12, Duration=2)  revealTrans(Transition=13, Duration=1)  revealTrans(Transition=14, Duration=2)  revealTrans(Transition=15, Duration=2)  revealTrans(Transition=16 Duration=1)  revealTrans(Transition=17, Duration=2)  revealTrans(Transition=18, Duration=2) revealTrans(Transition=19, Duration=1) revealTrans(Transition=20, Duration=2) revealTrans(Transition=21, Duration=2) revealTrans(Transition=22, Duration=2)"> </div>')
    document.write('</div>')     
}

if (ns6) {
    document.write('<div id="topdiv" style="position:relative;width:'+imagewidth+'px;height:'+topdivheight+'px">')
    document.write('<div id="mes" style="position:absolute;"> </div>')
    document.write('<div id="imgs" style="position:absolute;"> </div>')
    document.write('</div>')     
}

if (document.layers) {
    document.write('<ilayer name="topdiv" width='+imagewidth+' height='+topdivheight+'>')
    document.write('<layer name="mes"> </layer>')
    document.write('<layer name="imgs"> </layer>')
    document.write('</ilayer>')     
}

function checkpreloadtime() {
	starttime= new Date()
	starttime=starttime.getTime()
}

function checktime() {

}

window.onresize=new Function("window.location.reload()");
window.onload=init

</SCRIPT>

ATTENTION: put the code into HTML-table-cells in order to place the slideshow to your needs.

Step 2: Open your web page. Go to the top of the script-code and configure the URLS and size of the slides, the messages and the font attributes for your messages. Let's have a look at the configuration of the URLS and messages. We have made it easy for you by colorizing the sample code:

// Replace the URLs of the slides and the corresponding messages.
// Please note that the URL and the corresponding message are separated by "|".
// Watch how the "," and the " " are set!
// You may add as many slides as you like.
// Do not use the return-key to break the lines!!!
var slideshow=new Array("URL of first slide|Message of first slide","URL of second slide|Message of second slide","URL of third slide|Message of third slide")

gray code:
No need to change anything.

black code:
No need to change anything.

green code:
The URLs for the slides and their corresponding messages.

brown code:
Each slide and its corresponding message starts like this " and ends like this ".

blue code:
The URL of the slide and its corresponding message are separated by a |.

purple code:
do not forget to set a comma , between the ending " and the starting"!!!

IMPORTANT:
1. Do not use the return-key to break the code into neat lines. This will destroy the script. Just let the lines flow.
2. If you use special characters for your messages, add a \ in front of the special character.
So do not write it's love. Rather write it this way: it\'s love.

Click here and download 500 free copy-and-paste scripts!