Tweaking the Ultimate Fade-in slideshow script

[flipjevandejam]

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]

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]

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]

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]

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]

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]

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]

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]

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

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

[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]

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?