meerdere overvloeiers op 1 pagina-opgelost+

Vragen/antwoorden betreffende het maken van je eigen website.

Moria
Lid geworden op: 06 mar 2009, 21:41
Locatie: Vlaams-Brabant

06 mar 2009, 21:58

Goedeavond,

Ik heb een script gevonden van een overvloeier om plaatjes te showen.
Deze werkt perfect.
Bij deze script staat de opmerking :
mogelijkheid om meerdere diavoorstellingen tegelijkertijd weer te geven (door een andere arraynaam toe te voegen)

De eerste overvloeier werkt, maar als ik een tweede plaats komen de afbeeldingen niet te voorschijn. Ik vermoed dat ik iets verkeerd wijzig voor de arraynaam.

Kan iemand uitleggen wat ik ik moet veranderen om een andere arraynaam toe te voegen aub ?
Ik hoop dat iemand kan helpen, ik ben reeds bijna een week aan het prutsen :(
alvast bedankt om dit te lezen..

hier volgt het script :

Kopieer deze code en plaats ze in het HEAD-gedeelte van je pagina :
<style type="text/css">
.centerdiv{ /*IE methode voor het centreren van een relatieve div*/
text-align: center;
}
.centerdiv>div{ /*normale methode voor het centreren van een relatieve div*/
margin: 0 auto;
}
</style>

<script type="text/javascript">
var afbeelding=new Array()
//plaats hier de verwijzing naar de afbeeldingen: ["(pad+)naam", "hyperlink", "target"]
afbeelding[0]=["foto1.jpg", "", ""]
afbeelding[1]=["foto2.jpg", "", ""]
afbeelding[2]=["foto3.jpg", "", ""]
afbeelding[3]=["foto4.jpg", "", ""]
afbeelding[4]=["foto5.jpg", "", ""]

var agkleur="white"

//hieronder niets wijzigen

var overvloeiarray=new Array()
var overvloeiclear=new Array()

var dom=(document.getElementById)
var iebrowser=document.all

function diashow(afbeeldingen, breedte, hoogte, randdikte, tussentijd, pauzeren, volgorde){
this.pauzerencheck=pauzeren
this.muisovercheck=0
this.tussentijd=tussentijd
this.minimumwaarde=10
this.huidigbeeldindex=0
this.volgendbeeldindex=1
overvloeiarray[overvloeiarray.length]=this
this.diashowid=overvloeiarray.length-1
this.canvasbasis="canvas"+this.diashowid
this.deze_canvas=this.canvasbasis+"_0"
if (typeof volgorde!="undefined")
afbeeldingen.sort(function() {return 0.5 - Math.random();})
this.afbeeldingen=afbeeldingen
this.beeldrand=parseInt(randdikte)
this.toon_beeld=new Array()
for (p=0;p<afbeeldingen.length;p++){
this.toon_beeld[p]=new Image()
this.toon_beeld[p].src=afbeeldingen[p][0]
}

var breedte=breedte+this.beeldrand*2
var hoogte=hoogte+this.beeldrand*2

if (iebrowser&&dom||dom)
document.write('<div id="master'+this.diashowid+'" style="position:relative;width:'+breedte+'px;height:'+hoogte+'px;overflow:hidden;"><div id="'+this.canvasbasis+'_0" style="position:absolute;width:'+breedte+'px;height:'+hoogte+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+agkleur+'"></div><div id="'+this.canvasbasis+'_1" style="position:absolute;width:'+breedte+'px;height:'+hoogte+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+agkleur+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.diashowid+'" src="'+this.toon_beeld[0].src+'"></div>')

if (iebrowser&&dom||dom)
this.starten()
else{
this.huidigbeeldindex++
setInterval("overvloeiarray["+this.diashowid+"].wissel_beeld()", this.tussentijd)
}
}

function faden(obj){
if (obj.minimumwaarde<100){
obj.minimumwaarde+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number")
obj.tempobj.filters[0].opacity=obj.minimumwaarde
else
obj.tempobj.style.filter="alpha(opacity="+obj.minimumwaarde+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.minimumwaarde/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.minimumwaarde/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.minimumwaarde/101
}
else{
clearInterval(overvloeiclear[obj.diashowid])
obj.volgende_canvas=(obj.deze_canvas==obj.canvasbasis+"_0")? obj.canvasbasis+"_0" : obj.canvasbasis+"_1"
obj.tempobj=iebrowser? iebrowser[obj.volgende_canvas] : document.getElementById(obj.volgende_canvas)
obj.populateslide(obj.tempobj, obj.volgendbeeldindex)
obj.volgendbeeldindex=(obj.volgendbeeldindex<obj.toon_beeld.length-1)? obj.volgendbeeldindex+1 : 0
setTimeout("overvloeiarray["+obj.diashowid+"].wissel_beeld()", obj.tussentijd)
}
}

diashow.prototype.populateslide=function(picobj, beeldindex){
var slideHTML=""
if (this.afbeeldingen[beeldindex][1]!="")
slideHTML='<a href="'+this.afbeeldingen[beeldindex][1]+'" target="'+this.afbeeldingen[beeldindex][2]+'">'
slideHTML+='<img src="'+this.toon_beeld[beeldindex].src+'" border="'+this.beeldrand+'px">'
if (this.afbeeldingen[beeldindex][1]!="")
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}


diashow.prototype.wissel_beeld=function(){
if (this.pauzerencheck==1) //waarde pauzeren bij muisover = 1, indien niet gewenst = 0
var cacheobj=this
if (this.muisovercheck==1)
setTimeout(function(){cacheobj.wissel_beeld()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.deze_canvas] : document.getElementById(this.deze_canvas)
crossobj.style.zIndex++
overvloeiclear[this.diashowid]=setInterval("faden(overvloeiarray["+this.diashowid+"])",50)
this.deze_canvas=(this.deze_canvas==this.canvasbasis+"_0")? this.canvasbasis+"_1" : this.canvasbasis+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.diashowid]
ns4imgobj.src=this.toon_beeld[this.huidigbeeldindex].src
}
this.huidigbeeldindex=(this.huidigbeeldindex<this.toon_beeld.length-1)? this.huidigbeeldindex+1 : 0
}

diashow.prototype.resetit=function(){
this.minimumwaarde=10
var crossobj=iebrowser? iebrowser[this.deze_canvas] : document.getElementById(this.deze_canvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number")
crossobj.filters(0).opacity=this.minimumwaarde
else
crossobj.style.filter="alpha(opacity="+this.minimumwaarde+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.minimumwaarde/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.minimumwaarde/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.minimumwaarde/101
}


diashow.prototype.starten=function(){
var crossobj=iebrowser? iebrowser[this.deze_canvas] : document.getElementById(this.deze_canvas)
this.populateslide(crossobj, this.huidigbeeldindex)
if (this.pauzerencheck==1){
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.diashowid] : document.getElementById("master"+this.diashowid)
crossobjcontainer.onmouseover=function(){cacheobj.muisovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.muisovercheck=0}
}
this.wissel_beeld()
}

</script>

2. Kopieer deze code en plaats ze in het BODY-gedeelte van je pagina :

<div class="centerdiv">
<script type="text/javascript">
//new diashow(arraynaam, breedte, hoogte, randdikte, tussentijd, pauzeren (0=neen, 1=ja), optionele willekeurige volgorde = "R")
new diashow(afbeelding, 295, 207, 0, 1000, 1)
</script>
</div>

3. Kenmerken:
De afbeeldingen worden gecentreerd weergegeven, bij muisover wordt het overvloeien gepauzeerd, toevoegen van hyperlink en target voorzien, mogelijkheid om meerdere diavoorstellingen tegelijkertijd weer te geven (door een andere arraynaam toe te voegen), afbeeldingen kunnen in willekeurige volgorde weergegeven worden (zie optie in body-gedeelte).
Groetjes,
Moria

coderunner
Lid geworden op: 27 mar 2006, 04:35
Locatie: Aubauke - Aentwaerepe

07 mar 2009, 15:55

Beste Moria,

Zoek in het javascript tussen <head> en </head> naar
var afbeelding=new Array()
//plaats hier de verwijzing naar de afbeeldingen: ["(pad+)naam", "hyperlink", "target"]
afbeelding[0]=["foto1.jpg", "", ""]
afbeelding[1]=["foto2.jpg", "", ""]
afbeelding[2]=["foto3.jpg", "", ""]
afbeelding[3]=["foto4.jpg", "", ""]
afbeelding[4]=["foto5.jpg", "", ""]
en geeft het array een andere naam door er bv. 01 aan toe te voegen (afbeelding01) en maak een nieuwe array aan en geef die de naam afbeelding02 zoals hieronder is weergegeven
var afbeelding01=new Array()
//plaats hier de verwijzing naar de afbeeldingen: ["(pad+)naam", "hyperlink", "target"]
afbeelding01[0]=["foto1.jpg", "", ""]
afbeelding01[1]=["foto2.jpg", "", ""]
afbeelding01[2]=["foto3.jpg", "", ""]
afbeelding01[3]=["foto4.jpg", "", ""]
afbeelding01[4]=["foto5.jpg", "", ""]

var afbeelding02=new Array()
//plaats hier de verwijzing naar de afbeeldingen: ["(pad+)naam", "hyperlink", "target"]
afbeelding02[0]=["foto6.jpg", "", ""]
afbeelding02[1]=["foto7.jpg", "", ""]
afbeelding02[2]=["foto8.jpg", "", ""]
afbeelding02[3]=["foto9.jpg", "", ""]
afbeelding02[4]=["foto10.jpg", "", ""]
Vervolgens tussen <body> </body> zoek je naar
<div class="centerdiv">
<script type="text/javascript">
//new diashow(arraynaam, breedte, hoogte, randdikte, tussentijd, pauzeren (0=neen, 1=ja), optionele willekeurige volgorde = "R")
new diashow(afbeelding, 295, 207, 0, 1000, 1)
</script>
</div>
en daar geef je de diashow de juiste benaming van je hierboven gedefineerd array mee en ook die van de tweede diashow
<div class="centerdiv">
<script type="text/javascript">
//new diashow(arraynaam, breedte, hoogte, randdikte, tussentijd, pauzeren (0=neen, 1=ja), optionele willekeurige volgorde = "R")
new diashow(afbeelding01, 295, 207, 0, 1000, 1)
</script>
</div>

<br><br>

<div class="centerdiv">
<script type="text/javascript">
//new diashow(arraynaam, breedte, hoogte, randdikte, tussentijd, pauzeren (0=neen, 1=ja), optionele willekeurige volgorde = "R")
new diashow(afbeelding02, 295, 207, 0, 1000, 1)
</script>
</div>
et voilà!

mvg,
Coderunner
Bedank de perso(o)n(en) die je volledig op vrijwillige basis een antwoord geeft(geven) en/of beantwoord ten minste een reaktie op jouw vraag. Zo weten andere gebruikers EN de moderator dat je "probleem" al dan niet is opgelost. Alvast bedankt.

Moria
Lid geworden op: 06 mar 2009, 21:41
Locatie: Vlaams-Brabant

08 mar 2009, 00:40

Beste Coderunner,

Héél erg bedankt voor je hulp ! en zo duidelijke uitleg.

Ik had de wijzigen aangebracht zoals in je uitleg, behalve dat ik bij, hieronder vb: afbeelding [0] enz.. de wijziging niet aanbracht..omdat ik ik javascript niet ken, en maar aan het proberen en raden was...
afbeelding[0]=["foto1.jpg", "", ""]
afbeelding[1]=["foto2.jpg", "", ""]
afbeelding[2]=["foto3.jpg", "", ""]
afbeelding[3]=["foto4.jpg", "", ""]
afbeelding[4]=["foto5.jpg", "", ""]


Dankzij jou kan ik weer verder, ik ben zo blij, echt waar.

Op 4 verschillende forums die zich bezig houden speciaal met javascript, heb ik me registreerd, ofwel ik krijg geen reacties, ofwel, zoals op het forum van de site waar ze het script aanboden, waar ik zelfde uitleg zet als hier, krijg ik antwoord dat ik eerst zelf moet zoeken en ze niet mijn huiswerk gaan maken in mijn plaats :?

Ik had haast alle hoop opgegeven..en dan krijg ik hier alles zo duidelijk en vriendelijk op een schoteltje geserveerd :D
Er zijn toch nog vriendelijke en behulpzame mensen :D

Mijn probleem is dus opgelost Dank u wel Afbeelding
Groetjes,
Moria

coderunner
Lid geworden op: 27 mar 2006, 04:35
Locatie: Aubauke - Aentwaerepe

08 mar 2009, 14:30

Moria schreef:Héél erg bedankt voor je hulp ! en zo duidelijke uitleg.
Dankzij jou kan ik weer verder, ik ben zo blij, echt waar.
Beste Moria,

Dit is met alle plezier gedaan en bedankt om dit hier te melden.

Heb je nog problemen, dan weet je nu waar je moet zijn :wink:.

Veel succes met het maken van je website.

mvg,
Coderunner
Bedank de perso(o)n(en) die je volledig op vrijwillige basis een antwoord geeft(geven) en/of beantwoord ten minste een reaktie op jouw vraag. Zo weten andere gebruikers EN de moderator dat je "probleem" al dan niet is opgelost. Alvast bedankt.