PDA

View Full Version : Tweaking the Ultimate Fade-in slideshow script



bobbby
08-14-2006, 08:41 PM
Hi everybody,

I got a question about the Ultimate Fade-in slideshow (v1.5) script
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

You have the option to enter a link and target for your picture:


var fadeimages=new Array()
fadeimages[0]=["images/thumb1.jpg", "", ""]
fadeimages[1]=["images/thumb2.jpg", "bigpicture2.jpg", "_blank"][/


But I want to make a link with a "rel" attribute. In a normal link it would look something like this:

<a href="bigpicture2.jpg" rel="lightbox">Big Picture 2</a>

Is there a way to change the fade-in script to allow adding a "rel" attribute?

jscheuer1
08-15-2006, 12:13 AM
Yes but, that will not be enough to get lightbox to work with the ultimated fade-in script. This can be done but requires more than adding the rel attribute which can be done here (addition red):


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">'
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
}

The reason just adding the rel will not make lightbox work is that the lightbox script depends upon being initialized after the page is drawn. Normally the rel attributed links don't change too much after that but, with ultimate fade-in, they are changed with each fade of an image. I cannot be sure of the best place to reinit lightbox or exactly how (it varies in some of the different versions) but, a good place (a likely choice) and method (works for most lightbox versions) would probably be at the end of the above function:


. . . ssociated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
initLightbox();
}

bobbby
08-15-2006, 12:42 AM
Once again I'm very impressed with your knowledge, John. It works perfectly in FF and Opera, but IE7 doesnt want to open the page anymore ("cannot open page, operation cancelled").

I'm using Lightbox image viewer 2.0 (http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm) btw.

Any more ideas?

jscheuer1
08-15-2006, 01:39 AM
Try it in the current version of IE. I'm not planning on debugging scripts for IE 7 until it is in full release. If IE 6 gives problems, post a link to your example page and I will try to figure it out.

jscheuer1
08-15-2006, 01:46 AM
Oh, and I am curious though, IE 7 won't load the page with the slide show on it, or gives the error when you click on the image?

bobbby
08-15-2006, 02:08 PM
You can only have one version of IE installed, so I cant try it in IE6 right now, but I'll try it somewhere else soon.
IE7 wont show the page at all.

jscheuer1
08-15-2006, 06:01 PM
Well, if you put up a demo page somewhere, I can test it for you in IE 6 and see if anything jumps out at me. Do both scripts work OK in IE 7 when tried on separate pages?

bobbby
08-15-2006, 07:45 PM
I just tried it in IE6. Same error. I did notice a curious message in my statusbar though: opening page "res://C:\windows\system32\shdoclc.dll/dnserror.htm"

I don't know what it means yet, but perhaps you do.

I got both scripts working fine on the same page in IE7, but right now I'm using text links to open pics with lightbox and not the pictures (thumbnails) that fade-in.

I'm gonna put a page up for you in a few hours, so you can see for yourself. The current page is a bit of a mess...

bobbby
08-15-2006, 08:42 PM
I just made a clean page with just the essential items.

It works in all browsers except IE6/7.

The page does work in IE if I only use the text links "enlarge", but I would like the thumbnails to link to the larger picture. It's what people expect... If I make the thumbnails into links using jscheuer1's script, IE gives the error.

Thanks in advance

jscheuer1
08-16-2006, 03:23 AM
This will have to be a mystery for the ages unless someone else can figure out why this is happening. I figured out a solution but, have no idea why it works or why it was a problem to begin with. Here is the solution, remove:


initLightbox();

from where we originally placed it and move it to here (green in below code), make sure to add the braces as well (red):


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{
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)
}
}

In fact, since you've been such a good sport about all this, use this version of the script, it works with LightBox and will fade in the recent Opera as well as IE and FF. I don't know about LightBox for Safari but, this version of U-fade will work for it:


<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()
fadeimages[0]=["loadingsmall.gif", "", ""]
fadeimages[1]=["photo1.jpg", "photo10.jpg", ""]

var fadeimages2=new Array()
fadeimages2[0]=["loadingsmall.gif", "", ""]
fadeimages2[1]=["photo2.jpg", "photo11.jpg", ""]

var fadeimages3=new Array()
fadeimages3[0]=["loadingsmall.gif", "", ""]
fadeimages3[1]=["photo3.jpg", "photo12.jpg", ""]

var fadebgcolor="white"

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

bobbby
08-16-2006, 03:46 AM
Excellent work John! It works!

And I'm really pleased with the fact that it fades in Opera too, cause it's my favourite browser.

I found it funny that you didn't know what was going on. Now you know how the rest of us feel when we're staring at code ;-)

Thanks a lot and talk to you later (cause I have a feeling I will be needing your help in the future)

flipjevandejam
10-18-2006, 11:55 AM
I started to use youre (jscheur's) enhanced script, however, for some strange reason the fade script stops when it had done his loop once! I don't know where to look for the problem and I think I've been looking at the script for too long now..

My question therefore is if you would be so kind to look at my testpage and maybe be able to find the bug:
http://margriettuinen.nl/nieuw/test.html

Another thing is, that it's very strange that the lightbox effect fades when the user clicks on the close button or above or below the picture, but it doesn't fade when he clicks on either side of the black space of the picture.

Last question is what the "var stagger=1000" is doing in the script?

Thanx for your time/effort.

flipjevandejam
10-25-2006, 10:01 AM
Nobody has a clue? I tried to contact jscheur and bobbby via email and pm, but both unfortunately don't respond to those. While I'm typing this, I'm trying to get in touch with the creators of both scripts.

jscheuer1
10-26-2006, 04:35 AM
I can't speak for Bobby but, I've been busy and still am. Try not acting as though we are on retainer. :)

Anyways, I have looked over your post and link a few times and was wondering how best to advise you.

First of all there have been so many mods of this script, many by yours truly, that it has gotten hard to keep track of them all. The 'stagger' variable is a hold over from another mod. Harmless here but, it may be removed.

The particular mod in this thread is designed to run through the show only once, if a certain parameter is set. Since there is also the optional parameter for random (which you are using), I think that the script is getting confused.

There is supposed to be a relationship between the script's main function's parameters (in this case):


function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, onetime, displayorder)

and the call (from your source):


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

Which, in order to fulfill this relationship should look like so:


//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), onetime (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 140, 225, 1, 100, 0, 0, "R")

This should take care of the one time through behavior but, may cause other problems.

Also, if you are intending that folks be able to click on a given image, the delay should be greater than 100, more like 3000, and the pause should perhaps be 1, so that the image they want to click on doesn't change before they get the chance to click on it.

jscheuer1
10-26-2006, 04:46 AM
Yes, it will cause other problems, you need to also find this:


if(obj.flag&&obj.onetime){
initLightbox();
return;
}


Make it like this:


initLightbox();
if(obj.flag&&obj.onetime){
return;
}


Another bit of advice - your large images are too large, resize them in a paint program and also consider optimizing them to reduce their byte size.

flipjevandejam
10-26-2006, 07:21 AM
Thanx for the heads up, you're right that the images are too large and not optimized, that is because I wanted to test the script part first and adjust the images etc. later when I would be finishing up.

I'll try your adjustments and report back here :), thanx!

lmellor
11-23-2006, 12:11 AM
I'm having a minor problem with this one that doesn't seem to have been mentioned in here so far, when the page is viewed in firefox, the lightbox script becomes rather unstable where the close button is concerned. I have followed the instructions above to the t but the close button either doesn't appear or if it does then it doesn't work in when viewed in firefox, IE6 works perfectly.

I have another page which uses the lightbox script but not the slideshow script which works fine in all browsers so i can only put it down to the slideshow script.

can anyone help me on this one at all please?

:eek:

jscheuer1
11-30-2006, 05:47 PM
I'm having a minor problem with this one that doesn't seem to have been mentioned in here so far, when the page is viewed in firefox, the lightbox script becomes rather unstable where the close button is concerned. I have followed the instructions above to the t but the close button either doesn't appear or if it does then it doesn't work in when viewed in firefox, IE6 works perfectly.

I have another page which uses the lightbox script but not the slideshow script which works fine in all browsers so i can only put it down to the slideshow script.

can anyone help me on this one at all please?

:eek:

OK. This took a bit of looking into. I'm not really sure why this problem didn't come to light earlier. I think it is because the original 'solution' for combining lightbox and U-fade was based upon a request to also have U-fade run through only once. The problem only occurs in FF when U-fade keeps running and (with the current mod) re-inits lightbox after a given image has been presented with the lightbox effect. This causes its generated links (close and next/previous, if used) to be removed for some reason. To fix this, I went back to a copy of U-fade that didn't even attempt to use this 'once only' option from the previous mod. This is the script I came up with:


<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 and
* modified for a LightBox 2.0 tie in
* by jscheuer1 in http://www.dynamicdrive.com/forums
***********************************************/

var fadeimages=new Array()
fadeimages[0]=["images/spheres1.jpg", "images/spheres1.jpg", ""]
fadeimages[1]=["images/spheres2.jpg", "images/spheres2.jpg", ""]
fadeimages[2]=["images/spheres3.jpg", "images/spheres3.jpg", ""]
fadeimages[3]=["images/spheres4.jpg", "images/spheres4.jpg", ""]
fadeimages[4]=["images/spheres5.jpg", "images/spheres5.jpg", ""]

var fadebgcolor="#cbd8e4"

////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, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //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"
this.theimages=theimages
if (typeof displayorder!="undefined")
this.theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
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=this.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 style="display:none;">');
for (var i_tem = 0; i_tem < this.theimages.length; i_tem++)
document.write('<a title="'+this.theimages[i_tem][1].replace(/^.*\/|\.[^\.]+$/g, '')+'" href="'+this.theimages[i_tem][1]+'" rel="lightbox['+this.slideshowid+']"></a>');
document.write('</div>');
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)
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 title="'+this.theimages[picindex][1].replace(/^.*\/|\.[^\.]+$/g, '')+'" href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'" rel="lightbox['+this.slideshowid+']">'
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+"])",50)
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(){initLightbox();cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}

</script>

Use it with this call in the body:


<script type="text/javascript">
new fadeshow(fadeimages, 349, 242, 0, 2000, 1)
</script>

You now must use the 1 for pause on mouseover as this also is what will init lightbox for a given image.

To work as intended, a slight modification to lightbox.js is also required. Replace its:


Array.prototype.removeDuplicates = function () {
for(i = 1; i < this.length; i++){
if(this[i][0] == this[i-1][0]){
this.splice(i,1);
}
}
}

function (starting at line 125) in lightbox.js with this one:


Array.prototype.removeDuplicates = function () {
for(i = 0; i < this.length; i++){
for (var i_tem = 0; i_tem < this.length; i_tem++)
if(this[i][0] == this[i_tem][0]&&i!==i_tem){
this.splice(i_tem,1);
}
}
}

Notes: The script now sets up a next/previous link chain for lightbox based upon the filename of the larger image. You can use the random option (, "R") added to the call but, it isn't recommended. The changes to U-fade will prevent it from being used for a non-lightbox tied in slide show but shouldn't prevent multiple lightbox tied in slide shows per page. The changes to lightbox.js will not prevent it from being used in its normal manner (without U-fade).

lmellor
12-01-2006, 01:22 PM
Thanks dude, you're the daddy. Still a couple of quirks I've noticed, sometimes the close button still doesn't appear in firefox but overall it's now one amazing piece of kit, thanks once more, you've made me a very happy man.

Luke.

jscheuer1
12-01-2006, 04:24 PM
Thanks dude, you're the daddy. Still a couple of quirks I've noticed, sometimes the close button still doesn't appear in firefox but overall it's now one amazing piece of kit, thanks once more, you've made me a very happy man.

Luke.

Can you give me a link to an example page where this occurs?

flipjevandejam
01-05-2007, 02:42 PM
The new mod works perfectly for me, thanx so much jscheuer1!! One thing I wanted to ask was if it's possible to give the images shown in the lightbox a different caption than the filename, like you can in the originele lightbox.

jscheuer1
01-05-2007, 07:12 PM
The new mod works perfectly for me, thanx so much jscheuer1!! One thing I wanted to ask was if it's possible to give the images shown in the lightbox a different caption than the filename, like you can in the originele lightbox.

Don't be too sure about it working well for you. Have you tested it in FF? Anyways, here is the answer to your question about the captions -

Here:


document.write('<a title="'+this.theimages[i_tem][1].replace(/^.*\/|\.[^\.]+$/g, '')+'" href="'+this.theimages[i_tem][1]+'" rel="lightbox['+this.slideshowid+']"></a>');


and here:


slideHTML='<a title="'+this.theimages[picindex][1].replace(/^.*\/|\.[^\.]+$/g, '')+'" href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'" rel="lightbox['+this.slideshowid+']">'


Is where that is set, using the title attribute. I set it to the filename minus its path and its extension:


this.theimages[i_tem][1].replace(/^.*\/|\.[^\.]+$/g, '')

and:


this.theimages[picindex][1].replace(/^.*\/|\.[^\.]+$/g, '')

respectively. You could add another dimension to each entry in the array for it (example using one entry):


fadeimages[0]=["images/spheres1.jpg", "images/spheres1.jpg", "", "caption here"]

and then use:


this.theimages[i_tem][3]

and:


this.theimages[picindex][3]

respectively instead.

flipjevandejam
01-05-2007, 07:23 PM
Currently it's workin out very well for me, as you can see here: removed for search result reasons . Mind however that I'm continuously experimenting with this file. I've tested it on FF2 and IE6.

I think I'm going to try the second option for the caption, because I want to give every picture a different caption/description. How should I "use":

this.theimages[i_tem][3]

and:


this.theimages[picindex][3]

Another tiny question of mine is how to set the bordercolor of the borders. In FF they show darkgreen, in IE6 here they show blue for some reason..

jscheuer1
01-05-2007, 10:32 PM
In my previous post I outlined where those code segments go. For instance:


this.theimages[i_tem][3]

replaces:


this.theimages[i_tem][1].replace(/^.*\/|\.[^\.]+$/g, '')

in:


document.write('<a title="'+this.theimages[i_tem][1].replace(/^.*\/|\.[^\.]+$/g, '')+'" href="'+this.theimages[i_tem][1]+'" rel="lightbox['+this.slideshowid+']"></a>');

and similarly for the other segment. Please note, this isn't really a second option, either or thing. Both code segments must be altered as specified and the array entries must also be added to as mentioned, it all works together.

On to the border color. There is no provision in the script itself for image border color. However, each slide show instance on a page generates a container division with an id of 'master' plus the instance number. The first slide show is 0, the second is 1, and so on. So, you can do this in a stylesheet in or linked to the head of the page (for the first instance of a slide show):


#master0 img {
border:2px solid black;
}

This will override most other settings on the page. I am a little surprised that FF uses one color and IE another but, not too much as, the color is not actually specified. Other style on your page or defaults set in the browser's configuration may be affecting it. Once it is set in the above manner, it should override any other settings, including the border width set in the slide show call so, best to set that to the same number so that the size of the show is calculated properly by the script.

flipjevandejam
01-06-2007, 02:36 PM
Thanx! The bordercolor and captionsolutions are implemented successfully :). I'm finally finishing up with this thing, however, I've got the feeling the TARGET parameter doesn't work like it should.

To explain this you should check the following code and the website to see for yourself. Every image in the script on **url removed for search result reasons** has the following code (apart from the filenames ofcourse):

fadeimages[0]=["/Thumb/3-4/1ontwerp_voor_bedrijfsshowmateriaal.JPG", "/Galerij/MargrietTuinen/Albums/Album2/Source/1ontwerp_voor_bedrijfsshowmateriaal.JPG", "_top", "caption blablabla"]

I've implemented the fotos.htm page in an inline frame on the homepage (**url removed for search result reasons**), but when you click one of the images, it doesn't open fullscreen, like it should according to the "_top" parameter, right?

Maybe it's just something I overlooked when implementing the inline frame, or maybe it's not possible to put this in an inline frame?

jscheuer1
01-06-2007, 05:24 PM
Well, the target attribute of a link is only used when firing the link loads a file to the browser. What lightBox does (among other things) is to load the link's file to the page, instead of to the browser directly. As a result, lightBox has never worked well inside of an iframe. What you could do is to put the body portion of the external page in a division on the main page (home.htm in this case) substituting it for the iframe:


<div style="overflow:auto;width:190px;height:470px;">

body content from fotos.htm goes here

</div>

You also must place the scripts for it in or linked to the head of the home.htm.

flipjevandejam
01-08-2007, 12:12 AM
Hmm, I understand, but that's seriously a bummer, because the pictures in the iframe aren't only just implemented in an iframe on the home.htm page, but every other page on the site as well. The beauty of the construction as is, is that there's one modular file which is being loaded on every page.

Having to put the code into every page causes not only much traffic overhead, but a lot of editing overhead as well.

There isn't any other way of working this last difficulty?

P.S. Don't get me wrong, I highly appreciate the help you've given me and don't want to drive you nuts over my little thingy, but I wouldn't ask if I didn't think it's necessary.

jscheuer1
01-08-2007, 04:58 AM
I was afraid of something like that but, it isn't nearly as bad as you might think. What you can do is to make the main Ufade script external like the lightbox stuff already is. Now all you need to do is to link it and the lightbox scripts and css to the head of each page that will use it. Overhead just went way back down as all these script, and css files (including the images in the show and that support lightbox), once cached, will not need to be loaded again until cleared from the cache. To make the Ufade external put (the script without its opening and closing script tags):


/***********************************************
* 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 fadeimages=new Array()
fadeimages[0]=["/Thumb/3-4/1ontwerp_voor_bedrijfsshowmateriaal.JPG", "/Galerij/MargrietTuinen/Albums/Album2/Source/1ontwerp_voor_bedrijfsshowmateriaal.JPG", "_top", "Ontwerpvoorwerpen"]
fadeimages[1]=["/Thumb/3-4/9.0_ontwerp_en_beplantingsplan.JPG", "/Galerij/MargrietTuinen/Albums/Album2/Source/9.0_ontwerp_en_beplantingsplan.JPG", "_top", "Ontwerpvoorbeeld"]
fadeimages[2]=["/Thumb/3-4/14_bestraten.JPG", "/Galerij/MargrietTuinen/Albums/Album6/Source/14_bestraten.JPG", "_top", "Ontwerpvoorbeeld"]
fadeimages[3]=["/Thumb/3-4/2.0voor.JPG", "/Galerij/MargrietTuinen/Albums/Album3/Source/2.0voor.JPG", "_top", "Voor het advies, het ontwerp en de aanleg door Margriet Tuinen"]
fadeimages[4]=["/Thumb/3-4/2.1na.JPG", "/Galerij/MargrietTuinen/Albums/Album3/Source/2.1na.JPG", "_top", "Na de aanleg door Margriet Tuinen"]
fadeimages[5]=["/Thumb/3-4/3.0voor.JPG", "/Galerij/MargrietTuinen/Albums/Album3/Source/3.0voor.JPG", "_top", "Voor het advies, het ontwerp en de aanleg door Margriet Tuinen"]
fadeimages[6]=["/Thumb/3-4/3.3_winterbeeld.JPG", "/Galerij/MargrietTuinen/Albums/Album3/Source/3.3_winterbeeld.JPG", "_top", "Tijdens de aanleg door Margriet Tuinen"]
fadeimages[7]=["/Thumb/3-4/3.4winter_na3.JPG", "/Galerij/MargrietTuinen/Albums/Album3/Source/3.4winter_na3.JPG", "_top", "Na de aanleg door Margriet Tuinen"]
fadeimages[8]=["/Thumb/3-4/5.0_voor.JPG", "/Galerij/MargrietTuinen/Albums/Album3/Source/5.0_voor.JPG", "_top", "Voor het advies, het ontwerp en de aanleg door Margriet Tuinen"]
fadeimages[9]=["/Thumb/3-4/5.1_tijdens.JPG", "/Galerij/MargrietTuinen/Albums/Album3/Source/5.1_tijd . . .

[script code truncated to fit in message]

. . . le.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(){initLightbox();cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}

In a text editor, save it as - say, ufade.js and put it in the same folder as the pages that are using it. Now, due to DD's usage rules, this will have to go on each page that uses it (in the head, where the script would have gone - lightbox calls are included, as an example of what you will need):


<script src="ufade.js" 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
***********************************************/
</script>

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

You need to link the margriettuinen.css (if it is not already used by each page) in the head there too. Your:


#master0 img {
border:2px solid #367759;
}
#master1 img {
border:2px solid #367759;
}
#master2 img {
border:2px solid #367759;
}

styles can be added to the end of your margriettuinen.css file where I see you've already included the lighbox styles. These external files can be anywhere, but, if they are not in the same folder as the pages using them, the path to them must be included in the src= attribute and in the case of the css link, in its href= attribute (as is already done with the lightbox calls).

There may be the need for a little tweaking of the lightbox.css so that it can find all of its support images properly in all browsers and/or the scripts themselves may need the absolute path. Any of these paths (in the external calls or to images in the script and css files may always be made absolute by including the domain and path, ex:


<script type="text/javascript" src="http://margriettuinen.nl/js/scriptaculous.js?load=effects"></script>

You only need to do this if the script(s) are having trouble finding any of the images on any of the pages. Or, if any of the pages are having trouble finding the scripts.

Then the only thing that needs to go in the body of each page is:


<div style="overflow:auto;width:190px;height:470px;">
<script type="text/javascript">
//new fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder)
new fadeshow(fadeimages, 149, 112, 2, 8000, 1)
</script>
<br>
<script type="text/javascript">
//new fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder)
new fadeshow(fadeimages3, 150, 200, 2, 8000, 1)
</script>
<br>
<script type="text/javascript">
//new fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder)
new fadeshow(fadeimages2, 149, 112, 2, 8000, 1)
</script>
</div>

Not much more than the iframe tag.

flipjevandejam
01-08-2007, 12:11 PM
Hmm, I tried implementing the solution you brought, but since I use frames for the header, footer and the menu as well (I wouldn't have if I had known this up front ofcourse...), now the lightbox still opens in the subframe "midden" and not pagewide :eek: :mad:

I'm thinking of making an transparent super(i)frame which covers the whole page... :confused:

[edit]
Now that I come to think of it, can't I set the target in the lightbox to the frame "linksrechts" instead of "_top", here's my index.htm framecode btw:


<frameset cols="*, 1000, *" framespacing="0" frameborder="no">
<frame name="linksrechts" src="linksrechts.htm" NORESIZE>
<frameset rows="78,*,32" framespacing="0" frameborder="no">

<frame name="header" src="header.htm" NORESIZE scrolling="no" MARGINWIDTH="1" MARGINHEIGHT="1">

<frameset cols="175,*" framespacing="0" frameborder="no">

<frame name="menu" src="menu.htm" NORESIZE MARGINWIDTH="1" MARGINHEIGHT="1">

<frame name="midden" src="home.htm" NORESIZE MARGINWIDTH="1" MARGINHEIGHT="1">

</frameset>

<frame name="footer" src="footer.htm" NORESIZE scrolling="no">
</frameset>
<frame name="rechts" src="linksrechts.htm" NORESIZE>

flipjevandejam
01-08-2007, 03:42 PM
Is this piece of javascript any good in finding a solution for opening the lightbox pagewide?:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--

if (top.frames.length != 0) {
top.location.href = self.document.location;
}

//-->
</SCRIPT>


I don't know where, but I've got the feeling this needs to be implemented in the lightbox code instead of putting it into the .htm files. Correct?

jscheuer1
01-08-2007, 05:38 PM
I'm sorry flipjevandejam, I really should have realized this about your overall frames setup before getting your hopes up. There may be a way but, even in the disorganized and informal 'forums' dedicated to this script on the author's home page, no coherent workable solution has been proffered that I know of.

When I get some time I may play with the idea of having the lightbox script's page temporarily take over the top page position while displaying the larger images. The tricky part will be in remembering the state of the frameset and restoring it when the lightbox closes. It will be a major project. This approach is suspect though, because of the time involved in reloading the frameset. You might want to consider a different way of displaying your larger images. Using a pop-up window, though not generally the best solution, might be the most appropriate for your setup.

Another approach, if you have PHP or another server-side language available on your host would be to abandon the frameset in favor of server-side includes. That way you could have the ease of editing template files for the content that is to appear on each page without the drawbacks of the frameset. This is not a simple proposition but, one worth pursuing (if it is available to you) as, it will work with lightbox and once setup, will be easy enough to maintain.

flipjevandejam
01-08-2007, 06:30 PM
My knowledge doesn't extent to the creation of PHP, so I don't think that's really an option here. PHP is an option on my host by the way.

It's a real pity that this isn't fixable with a quick edit somewhere, because this is the last 1% of the whole website that needs to be done to complete it :(.

If you would be so kind looking into the possibility of editting the lightbox in a way that it can take control of the frameset, that would fantastic, but if it's going to be such a major project with no end in sight, please don't.

Please let me know if you're going to work on it or not, because if not, I'll just leave the lightbox for what it is and stick with the ufade which will be non-clickable. It's just such a bloody shame I/we have wasted so much time on this beautiful feature..

[edit]
Hold your horses please :), I went searching on the forums of the creator of the lightbox (you did too you said) and I've found several topics on his forum about this problem and also solutions to use it in an iframe. I'm going to read through them now, I'll copy/post what I think is useful :).

[edit2]
I think I've found our solution! :) It starts here: http://www.huddletogether.com/forum/comments.php?DiscussionID=250&page=1#Item_1 where someone started on a project called "lytebox", an extended version of lightbox 2 with it's homepage here: http://www.dolem.com/lytebox/.

I'm going to read it through now, but this version is specifically made as solution to the (i)frame problem, so I think we should get a bit further now! (Yes, I'm kind of exited as you've might have noticed xD).

jscheuer1
01-10-2007, 04:24 PM
OK, neat script. That's new since I last had a look at the author's site. I came up with this script that works well with it. The first thing that you will need to do is convert your original iframe setup over to using the lytebox modification for this script and get that working. That will include placing the calls to lytebox on your iframe page and the pages with the iframes on them and these mods to Ufade:

Where we had:


crossobjcontainer.onmouseover=function(){initLightbox();cacheobj.mouseovercheck=1}


It will now need to be:


crossobjcontainer.onmouseover=function(){initLytebox();add_events();cacheobj.mouseovercheck=1}


Save the above green modification until after you install the below script, and wherever we had (2 places):


rel="lightbox['+this.slideshowid+']"

it will need to be:


rel="lytebox['+this.slideshowid+']"

Once you have that, you can put this script in the head of the page inside of the iframe (fotos.htm), place it before the Ufade script on that page and make the final green modification to Ufade as mentioned above:


<script type="text/javascript">

function add_events(){
function el(){
function ell(){
var s=top.document.getElementsByTagName('frameset');
s[0].cols="*, 1000, *";
s[1].rows="78,*,32";
s[2].cols="175,*";
if(typeof this.detachEvent != "undefined")
this.detachEvent ('onclick', ell);
}
var s=top.document.getElementsByTagName('frameset');
s[0].cols="*,100%,*";
s[1].rows="*,100%,*";
s[2].cols="*,100%";
var c=parent.document.getElementById('bottomNavClose');
if ( typeof c.addEventListener != "undefined" )
c.addEventListener( "click", ell, false );
else if ( typeof c.attachEvent != "undefined" )
c.attachEvent( "onclick", ell );
}
var a=document.getElementsByTagName('a');
for (var i_tem = 0; i_tem < a.length; i_tem++)
if(a[i_tem].rel.indexOf('lytebox')>-1)
if ( typeof a[i_tem].addEventListener != "undefined" )
a[i_tem].addEventListener( "click", el, false );
else if ( typeof a[i_tem].attachEvent != "undefined" )
a[i_tem].attachEvent( "onclick", el );
}
if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", add_events, false );
else if ( typeof window.attachEvent != "undefined" )
window.attachEvent( "onload", add_events );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
add_events();
};
}
else
window.onload = add_events;
}
</script>

This is tailor made for the way your frameset page is setup, if that changes, adjustments will need to be made to it. I repeat though, it goes on the page that will be displayed inside the iframe.

flipjevandejam
01-10-2007, 04:45 PM
Thanks for the new code, but I must explain something:
1. I started to think you wouldn't reply to this new script since you did post to other threads and not my latest reply, but moreover because this isn't a DD-script, but someone elses.
2. It still doesn't work with a frameset.
3. I decided that the solution with the <div> code was a fair enough solution and that it's a bit of a pity the photo's don't open pagewide, but that's something I can and will have to live with..
4. For quite some time already, I wanted this website to be finished yesterday and so I decided to finish it today, with the <div> solution.

Maybe this new lytebox script is a little cleaner (for as fare as my judgement goes), but the old lightbox works perfectly in my situation and the addition of your code above doesn't add anything to the way the photo's are presented now.

So please don't get me wrong, I want to thank you very much for all the help you've given me, but I'm not going to implement the code on this website. Maybe in the future on another website, but one way or another, I'm sure quite a few people will be helped with your explanations and contributions here by reading this thread.

jscheuer1
01-10-2007, 05:51 PM
As it turns out, that is how I originally developed the solution, try this script:


<script type="text/javascript">

function add_events(){
function el(){
function ell(){
var s=parent.document.getElementsByTagName('frameset');
s[0].cols="*, 1000, *";
s[1].rows="78,*,32";
s[2].cols="175,*";
if(typeof this.detachEvent != "undefined")
this.detachEvent ('onclick', ell);
}
var s=parent.document.getElementsByTagName('frameset');
s[0].cols="*,100%,*";
s[1].rows="*,100%,*";
s[2].cols="*,100%";
var c=document.getElementById('bottomNavClose');
if ( typeof c.addEventListener != "undefined" )
c.addEventListener( "click", ell, false );
else if ( typeof c.attachEvent != "undefined" )
c.attachEvent( "onclick", ell );
}
var a=document.getElementsByTagName('a');
for (var i_tem = 0; i_tem < a.length; i_tem++)
if(a[i_tem].rel.indexOf('lightbox')>-1)
if ( typeof a[i_tem].addEventListener != "undefined" )
a[i_tem].addEventListener( "click", el, false );
else if ( typeof a[i_tem].attachEvent != "undefined" )
a[i_tem].attachEvent( "onclick", el );
}
if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", add_events, false );
else if ( typeof window.attachEvent != "undefined" )
window.attachEvent( "onload", add_events );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
add_events();
};
}
else
window.onload = add_events;
}
</script>

Put it in or linked to the head of each page that has the division showing the Ufade show, before the Ufade show script. Make this one change to the Ufade code:


crossobjcontainer.onmouseover=function(){initLightbox();add_events();cacheobj.mouseovercheck=1}

flipjevandejam
01-10-2007, 05:54 PM
I'm sorry, I can't quite follow your on this last one, you mean you made a solution to the frameset problem and with the new version it all works like a charm? And please elaborate on what to put where :).

jscheuer1
01-10-2007, 06:09 PM
I made, basically four solutions. The first was just a test and need not concern you too much but, it was to get the Lytebox demo to work in a frameset. I then translated this to your setup using Lightbox and the div. That solution is outlined in post #35 in this thread. This one can adapt to what you currently have. I then did a third test which also would be of little interest to you, it simply upgraded my first demo test to include Lytebox in an iframe in a frameset. Once I got that working, I came up with the solution in post #33 of this thread. It would work with your setup as it was when you had the iframe if you upgraded to Lytebox first. It includes info on how best to do that. But, is a bit more complicated than the current solution for the current setup (post #35). These are two separate, though similar solutions, do not confuse the two.

Added Later:

I might add that I favor using the division and Lightbox to using Lytebox for a number of reasons. Lightbox appears more stable and fully cross browser compliant and cutting out the iframe will simplify troubleshooting should it become necessary.

stefsegers
09-14-2007, 06:54 AM
Hi all,

This dynamic fade 1.51 rocks. For Safari and other browsers this is the solution!
I have 2 questions:

1: I want to put the Complete script to a external file fotografie1.js (or something).
Fot what I did now I put all the scripting into the external file and in the head I called it up: <script language="javascript" type="text/javascript" src="includes/fotografie1.js"></script>
The problem now is that this won't work.I get 2 errors:

mising } in XML expression
this.mouseovercheck=0\n

and

fadeshow is not defined
new fadeshow(fadeimages, 718, 420, 0, 3000, 1, "R")
21 </script>

How can I solve this? I think it will be better to put all the scripting to a external file for a clean html

2nd question: If my first question will work I really want to have a external file (xml or what ever) with the filenames in it that have to be shown in the slide/fade show. Is this also possible? That way You can create multiple slideshows using 1 javascript. The best thing would be to put in the HTML the name of the XML file which contains the images I think?

I hope the can be some options on my questions?


Hope to hear from you soon

Stef