DHTML JavaScript Multi Topic Slideshow Code

DHTML JavaScript Multi Topic Slideshow Code

This unique multi topic slideshow allows you to display several different slideshow topics within the same player.

You may add as many slideshows as you like.

Each slideshow may contain as many slides and corresponding messages as you like.

The slideshow requires no absolute positioning. So you may paste it even into ordinary HTML-tables (as seen in this sample).

You may use a player-skin of your own. The script can be set to any player-size and slide-size.

The script has a unique preload feature. It caches the next slide in line as you're viewing the current. This ensures a smooth transition even if you use millions of slides!

IE 4x users will see a special transition effect between the slides.

Cross-browser: works with Internet Explorer4x/5x and Netscape Navigator 4x/6x.

Click the slideshow-links below to see the multi topic feature in action:
- slideshow holiday
- slideshow women
- slideshow carneval

Configuration

Step 1: Open your web page. Insert the following code where you wish the slideshow to appear
(anywhere inside the </body> tag of your web page):

<SCRIPT>
// CREDITS:
// Multi Topic Slideshow
// by Urs Dudli and Peter Gehrig 
// Copyright (c) 2001 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.fabulant.com & http://www.designerwiz.com
// fabulant01@hotmail.com
// 11/8/2001

// 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.fabulant.com
// right into the webpage where the script will be displayed.

var slideshow=new Array()
slideshow[0]=""

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

// FIRST SLIDESHOW
// 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.
// Do not use the return-key to break the lines!!!
slideshow[1]=new Array("sampleholiday01.jpg|Time to relax.","sampleholiday02.jpg|Yes, that looks like holiday!","sampleholiday03.jpg|Bye-bye and come back soon.")

// SECOND SLIDESHOW
// Replace the URLs of the slides and the corresponding messages.
// Please note that the URL and the correponding message are separated by "|".
// You may add as many slides as you like.
// Do not use the return-key to break the lines
slideshow[2]=new Array("samplewomen01.jpg|My last friend.","samplewomen02.jpg|My new friend.","samplewomen03.jpg|My next friend.")

// THIRD SLIDESHOW
// Replace the URLs of the slides and the corresponding messages.
// Please note that the URL and the correponding message are separated by "|".
// You may add as many slides as you like.
// Do not use the return-key to break the lines!!!
slideshow[3]=new Array("samplecarneval01.jpg|Hey, let\'s go to Rio.","samplecarneval02.jpg|Is this Rio? I think not!","samplecarneval03.jpg|It\'s rather the end of carneval")

// DO YOU WANT TO ADD MORE SLIDESHOWS?
// Just add more slideshow-blocks as seen above.

// 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 URL of the player (the skin-image beneath your slides)
var playerurl="sampleplayer.gif"

// the width of the player-image (pixel)
var playerwidth=271

// the height of the player-image (pixel)
var playerheight=207

// the distance of the slides to the top margin of the player (pixel)
var imgstop=12

// the distance of the slides to the left margin of the player (pixel)
var imgsleft=16

// the distance of the messages to top margin of the player (pixel)
var mestop=182

// the distance of the messages to the left margin of the player (pixel)
var mesleft=16

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

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

// do not change the code below
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 ns6=document.getElementById&&!document.all?1:0
var standstill=standstill*1000

function init(indexofslideshow) {
    firstslide=true
    i_imgs=0
    i_loop=0
    i_preloadloop=0
    if (timerrotate) {
        clearTimeout(timerrotate)
        clearTimeout(timercheck)
    }
    imgurl=new Array
    message=new Array
    for (i=0;i<=slideshow[indexofslideshow].length-1;i++) {
        imgurlandmessage=slideshow[indexofslideshow][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
        }
        timerrotate=setTimeout("rotateimages()", interval)
   }
   else {
        timercheck=setTimeout("checkifloaded()", 100)
   }
}

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

function rotateimages() {
    i_preloadloop++
    if (i_preloadloop>imgurl.length-1) {i_preloadloop=0}
    checkpreloadtime()
    preloadimage()
    if (i_loop>imgurl.length-1) {i_loop=0}
    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 getcontent() {
    contentimg="<img src='"+imgurl[i_loop]+"'>"
    contentmes="<font size="+fntsize+" color="+fntcolor+" face="+fntfamily+">"+message[i_loop]+"</font>"
}

if (document.all) {
    document.write('<div id="topdiv" style="position:relative;width:'+playerwidth+'px;height:'+playerheight+'px">')
    document.write('<div id="player" style="position:absolute;top:0px;left:0px;width:'+playerwidth+'px;height:'+playerheight+'px;">')
    document.write('<img src="'+playerurl+'" width='+playerwidth+' height='+playerheight+'>')
    document.write('</div>')
    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:'+playerwidth+'px;height:'+playerheight+'px">')
    document.write('<div id="player" style="position:absolute;top:0px;left:0px;width:'+playerwidth+'px;height:'+playerheight+'px">')
    document.write('<img src="'+playerurl+'" width='+playerwidth+' height='+playerheight+'>')
    document.write('</div>')
    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='+playerwidth+' height='+playerheight+'>')
    document.write('<layer name="player" width='+playerwidth+' height='+playerheight+' align=left>')
    document.write('<img src="'+playerurl+'" width='+playerwidth+' height='+playerheight+'>')
    document.write('</layer>')
    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()");
</script>

ATTENTION: put the code into HTML-tables 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 of the slides, the messages, the URL and size of the player-skin, the position of the slides and messages, as well as the font attributes for your messages. Only the configuration of the URLS of the slides and messages is tricky. So let's make it easy by colorizing the code:

// FIRST SLIDESHOW
// 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!!!
slideshow[1]=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.

red code:
Each slideshow has a index number. The 1 indicates that this is slideshow number 1.

green code:
The URLs for the slides and the corresponding messages. Each slide and its corresponding message starts like this " and ends like this ". The URL and the 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.

Step 3: Configure the links that will start your slideshows. Paste the red and blue code anywhere into your webpage:
<a href="javascript:init(1)">slideshow number 1</a>
This sample-link will start slideshow number 1 as indicated by the blue 1. Set it to 2 to start slideshow number 2. Set it to 3 to start slideshow number 3 and so on ...

Download 500 free copy-and-paste scripts

Like this code snippet? Why not share it with others by copying this page URL: