[Javascript] Lightbox en fadescript combineren

[flipjevandejam]

Ik heb twee mooie scripts gevonden voor het weergeven van afbeeldingen, namelijk lightbox en Ultimate Fade-in slideshow.
Deze twee zou ik graag willen combineren en daarvoor heeft een gast op de dynamicdrive forums een apart script geschreven (zie hieronder)


Nu heb ik hier een implementatie gemaakt, die volgens mij goed zou moeten werken, maar waar twee vreemde problemen mee zijn, allereerst de link:


Een van de vreemde dingen is dat de loop van weergeven van afbeeldingen door zou moeten gaan, maar dat hij na 1x stopt, waarom kan ik niet vinden. Het andere is dat de tweede afbeelding (welke linkt naar ) niet weergegeven wordt in de lightbox, waar het bij de andere wel prima gebeurd! De code in het script om naar deze afbeelding te linken is namelijk identiek aan die andere, toch?!

Ik heb overigens de maker van dit script ook al gecontact, maar die heeft nog niet gereageerd, vandaar dat ik het hier probeer.

code:

<script type="text/javascript">
/***********************************************
* Ultimate Fade-In Slideshow (v1.5): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
* Updated for better Safari & Opera 9+ Compliance,
* a once through option and LightBox 2.0 tie in
* by jscheuer1 in http://www.dynamicdrive.com/forums
***********************************************/

var stagger=1000

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["/Gallerij/MargrietTuinen/Albums/Album2/Thumb/1ontwerp_voor_bedrijfsshowmateriaal.jpg", "/Gallerij/MargrietTuinen/Albums/Album2/Source/1ontwerp_voor_bedrijfsshowmateriaal.JPG", ""] //plain image syntax
fadeimages[1]=["/Gallerij/MargrietTuinen/Albums/Album2/Thumb/9.0_ontwerp_en_beplantingsplan.jpg", "/Gallerij/MargrietTuinen/Albums/Album2/Source/9.0_ontwerp_en_beplantingsplan.JPG", ""] //image with link syntax
fadeimages[2]=["/Gallerij/MargrietTuinen/Albums/Album2/Thumb/9.1.jpg", "/Gallerij/MargrietTuinen/Albums/Album2/Source/9.1.JPG", ""] //image with link and target syntax
 
var fadebgcolor="#E6FFE6"
 
////NO need to edit beyond here/////////////
 
var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers
 
var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all
 
function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, onetime, displayorder){
this.flag=0
this.onetime=onetime
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=0 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}
 
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:10;-moz-opacity:10;-khtml-opacity:10;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:10;-moz-opacity:10;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
if(obj.flag&&obj.onetime){
initLightbox();
return;
}
if(obj.nextimageindex==obj.postimages.length-1)
obj.flag=1
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}
 
fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'" rel="lightbox[decora]" title="Decora Serie">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}
 
 
fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",75)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}
 
fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}
 
 
fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}
 
</script>

Met in de body:

code:

<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 140, 225, 1, 100, 0, "R")
</script>

[ Voor 9% gewijzigd door flipjevandejam op 12-01-2007 12:53 ]

[flipjevandejam]

Kan iemand hier nog ff naar kijken / reageren / helpen?

[Wokkels]

Nee, ik denk het niet eigenlijk. GoT is geen supportforum voor andermans scripts. Helaas.

Ik zou gewoon even wachten op reactie van de maker, want het is natuurlijk geen doen om iemand anders z'n code te gaan debuggen.

[flipjevandejam]

Hmm, terijl ik dit typ probeer ik dus ook in contact te komen met beide/een van de twee makers van beide scripts die ik probeer te combineren, maar heel vlot wil dat nog niet gaan jammergenoeg.