Asynchronous Loading for Ultimate Fade-In Slideshow (v1.51)?

[howard.a.s]

1) Script Title: Ultimate Fade-In Slideshow (v1.51)

2) Script URL (on DD): Ultimate Fade-In Slideshow (v1.51)

3) Describe problem: Can anyone tell me if it's possible to easily adapt the following code, containing document.write, so that it will load asynchronously by adding 'async' or 'defer' to the tag calling the script. I've tried everything I can think of, but as soon as I add 'async' or 'defer' it just fails to load. Any advice and assistance would be very gratefully received.

// JavaScript Document<script type="text/javascript">
/***********************************************
* Ultimate Fade-In Slideshow (v1.51): © 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.
***********************************************/
 
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["01.jpg"," "] 
fadeimages[1]=["02.jpg"," "] 
fadeimages[2]=["03.jpg"," "] 
fadeimages[3]=["04.jpg", ""] 

var fadebgcolor="333333"

////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"
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:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;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:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'" style="Z-INDEX:1"></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 href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
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(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}
 
</script>

[jscheuer1]

No script that uses document.write can be deferred or run in an asynchronous manner.

Update to the current version of the script:

http://www.dynamicdrive.com/dynamici...nslideshow.htm

Aside from its script code, it begins to load on document ready (after the page has been parsed) and waits for the first image to load before starting. If it's script code is placed at the end of the document, it will wait until then to even load the code.

[howard.a.s]

I have been studying the new version of the script, but am unclear as to whether it's possible to add all the code links to the images for the slideshow in an external file, instead of on the actual page, as was the case with v1.5. Do you know if this can be done?

[jscheuer1]

Yes. The links go on the page in the imagearray portion of the new fadeSlideShow() call (from the demo page, first example code block):

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
		["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
		["http://i30.tinypic.com/531q3n.jpg"],
		["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})

The highlighted is a link. Each image may have a link, if desired. An image's link is the second item following the path to the image. The third item is the link target, again, if desired. The fourth is an optional description for the image. If none of these is wanted, only the image is required. But if - say, you want a description and no link, the link and target fields need to be empty.

Any further questions, feel free to ask.

[howard.a.s]

Thank you for your continued help. I am very grateful. I can see what you mean when it comes to adding links to each of the images. In fact the actual image array for each individual slideshow is pretty similar to that of v1.5.

What I actually meant to ask (and probably didn't explain very well) is that in v1.5, all of the image array information, such as the path to each image, together with the links to external urls, is placed in a separate file, together with the script code, and not in the head of the page on which the slideshow/s appear, as seems to be the case with v2. A simple link from the head of each page to this one external file, containing all the image array information for every single instance of the slideshow, is all that's necessary in order for it to work. Whereas in v2, it looks as though it's necessary to add a block of code containing the image array in the head or at the foot of each page on which the slideshow appears.

In v1.5, instead of an empty div where each instance of the slideshow is set to appear, v1.5 uses a <script></script> tag, containing the unique name of the slideshow, together with various parameters which can be set, such as dimensions, change speed etc.

With v2, I am happy to have just an empty div where the slideshow is to appear, but would still prefer if all the other information could be placed in a separate file, as was the case with v1.5, instead of it being placed in the head, or at the foot of the page. I'm guessing this is not possible?

[jscheuer1]

Actually, with version 1.51, all the script code went in the head of the page. Someone else must have made it into an external file before you got to it, or you did that yourself. Any script can be either external or internal though. Most of the current version is already external. If you prefer all of the current version to be external, using a text only editor like NotePad, put the new fadeSlideShow() call (without its opening and closing script tags) at the very end of fadeslideshow.js file.

[howard.a.s]

I've tried what you suggest and it works perfectly on my test page. All I need to do now is to include this modification into my actual website in place of v1.5. As soon as I know whether it works as anticipated, I'll post back to let you know. Thanks again.

[howard.a.s]

Further to our previous communications, do you know if it's possible to make the slideshow background transparent, as was the case with v1.5 which included the line: var fadebgcolor="transparent"

[howard.a.s]

I have added 4 arrays to my fadeslideshow.js file, each with a unique id. 2 slideshows appear on the first page of my site, with the remaining 2 appearing on the second page.

Each time either of the pages load, there appears on the screen a number of javascript error messages saying that some of the divs are missing. Is there a way to overcome seeing these messages if I don't add all slideshows to the same page. Obviously I could create a different script for each page, but the v1.5 managed to achieve this without the error messages, so what might I be doing wrong?

[jscheuer1]

To make the slideshow background transparent, add this to your stylesheet:

#fadeshow1, .gallerylayer {background-color: transparent !important;}

Where fadeshow1 is the unique id of the slideshow. If you have more than one slideshow you can add it on like so:

#fadeshow1, #fadeshow2, .gallerylayer {background-color: transparent !important;}

That error alert you are getting is because you are running code on a page that's not using it. You can avoid that by only running the code on the pages where you are using it. That's the best approach. You can also get rid of the error by editing the fadeslideshow.js file here:

	jQuery(document).ready(function($){ //fire on DOM ready
		var setting=slideshow.setting
		var fullhtml=fadeSlideShow.routines.getFullHTML(setting.imagearray) //get full HTML of entire slideshow
		setting.$wrapperdiv=$('#'+setting.wrapperid).css({position:'relative', visibility:'visible', background:'black', overflow:'hidden', width:setting.dimensions[0], height:setting.dimensions[1]}).empty() //main slideshow DIV
		if (setting.$wrapperdiv.length==0){ //if no wrapper DIV found
			//alert("Error: DIV with ID \""+setting.wrapperid+"\" not found on page.")
			return
		}

Using a text only editor like NotePad, add the red comment tokens as shown.