Page 1 of 2 12 LastLast
Results 1 to 10 of 11

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

  1. #1
    Join Date
    Aug 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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.

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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,375
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thanks

    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?

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,375
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

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

    Code:
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Aug 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,375
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Aug 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  8. #8
    Join Date
    Aug 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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"

  9. #9
    Join Date
    Aug 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,375
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

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

    Code:
    #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:

    Code:
    #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:

    Code:
    	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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Replies: 3
    Last Post: 09-13-2013, 02:14 AM
  2. Ultimate Fade-in Slideshow v2/0 - loading.gif won't load
    By jbarnaby in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 01-19-2011, 06:28 PM
  3. ultimate fade in slideshow loading time
    By Rosalie in forum Dynamic Drive scripts help
    Replies: 10
    Last Post: 09-18-2010, 07:05 PM
  4. Ultimate Fade-in slideshow - images not loading
    By peanutville in forum Dynamic Drive scripts help
    Replies: 9
    Last Post: 02-16-2010, 01:14 PM
  5. Ultimate fade in slideshow image loading
    By bode in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 10-04-2008, 01:57 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •