MULTI-TOPIC-SLIDESHOW

[Hape]

Diese einzigartige Diashow mit mehreren Themen ermöglicht es Ihnen, mehrere verschiedene Diashows innerhalb desselben Players anzuzeigen. Sie können beliebig viele Diashows hinzufügen. Jede Diashow kann beliebig viele Dias und Nachrichten enthalten. Die Slideshow erfordert keine absolute Positionierung. Sie können die Diashow sogar in HTML-Tabellen einfügen!

Code: Alles auswählen

<script>
// CREDITS:
// Multi Topic Slideshow
// by Urs Dudli and Peter Gehrig 
// Copyright (c) 2010 Peter Gehrig. 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

// 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>

Für die enzelnen Slideshows müssen dann noch entsprechende Links erstellt werden in dieser Form:

Code: Alles auswählen

<a href="javascript:init(1)">slideshow number 1</a>

Code: Alles auswählen

<a href="javascript:init(2)">slideshow number 2</a>

Code: Alles auswählen

<a href="javascript:init(3)">slideshow number 3</a>

Demoseite gibt es hier: Multi-Topic-Slideshow