Ultimate Slideshow won't work with AJAX image retrieval

[kenja]

1) Script Title:
Ultimate Fade in Slideshow (v.1.51
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...nslideshow.htm
3) Describe problem:

I am writing a module that will display a slideshow inside a div once the page has loaded. The script creates an AJAX request for the image urls and then passes that array to the fadeshow function. If I start the fadeshow inside the HTTPRequest response, it doesn't show up. However, if I call it outside of the HTTPRequest it works fine.

This is what I want, but it doesn't work:

<div align="center" valign="middle" id="mod_rotate_image" style="width:165px;height:130px;">

<script language="JavaScript">
		
		var params="";
		var request =  new XMLHttpRequest();
		request.open("GET", '/partner_images.php', true);
		request.setRequestHeader("Content-Type","application/x-javascript;");
		
		request.onreadystatechange = function() {
		    if (request.readyState == 4 && request.status == 200) {
		      if (request.responseText) {
		        var myObject = JSON.parse(request.responseText);
		        var images=new Array()
		        images=myObject.images;
			new fadeshow(images, 165, 130, 0, 3000, 0, 0);
		      }
		    }
		};
		request.send(params);
</script>
</div>

I've verified that the AJAX call is returning the URLs into the images array and that it is properly formatted.

I've also tried calling the fadeshow function using hard coded images like in the example. The fadeshow works if it call it outside of the HTTPRequest function, but it does not work if I call it within that function. Does anyone know how to get this working?

Also, is there a way to load a fadeshow into a div on the page without placing the script within the div? I'd like to load the script (and associated images) as the very last thing so it doesn't slow down my page download.

[jscheuer1]

Ultimate Fade cannot really respond all that well to imported content because to initialize properly it must write to the page using the document.write() method. If it were to do that after the page has loaded (all AJAX importation happens after the page has loaded), it would obliterate the rest of the page, including anything you just imported via AJAX.

I am currently working on a script that allows importing various content via AJAX and then start displaying a fading slide show. The script has many other capabilities but may be configured to do as I say. Would you be interested in testing it?

[kenja]

Sure. It sounds like that is what I need and I'd be glad to test it out.

I'm planning to use this as a "partners" box where companies that we partner with are faded in and out like the "Our Partners" box on this site:

http://www.begreennow.com/

The key is that I don't want it to affect the page loading time.

Does the script allow you to specify a div that you want the fading slide show to display in?

[jscheuer1]

The script allows you to either already have the display area setup on the page, or you can import that as well into a waiting division. I have a demo in my personal web area, I'll check now that the proper credits are on that work and update it if need be, then publish a link so you can get the code.

The form that you would import your images would be something like so:

<a href="images/image_01.jpg" rel="vfsimage::mouseover" rev="vac"></a>

These could be hidden, which would be best for your purpose as you describe it (they may also act as triggers for text or thumbnails if one wants to have that sort of a feature, as I say, there are many options). The script listens for any mouseover and clicks of the entire document, checking each time for any new links with the rel="vfsimage::mouseover" or rel="vfsimage::click" attribute. If it finds any new ones and is so configured and there is a display area for them, it starts preloading the images from the href values of the links, and a slide show of them in that display area. In the case of the above example link, that display area would be an element (usually a division) with an id of 'vac' as set by the link's rev attribute.

You wouldn't necessarily need to import these links via AJAX but could simply add them via the DOM or by writing to an element's innerHTML property (how successful AJAX request usually are made a part of an existing document anyway).

[jscheuer1]

OK, here's a demo:

http://home.comcast.net/~jscheuer1/side/vfs/

The way things look in the slideshow is dictated primarily by style, the numbering is optional (I've turned off a lot of the options to make this one look similar to what you are going for). By clicking 'go long' or 'go short', it will simulate the import of AJAX content by writing to the inner HTML of the target division.

[kenja]

I haven't forgotten... I'm just wrapping up a few things before I try it. I'll keep you informed on how it goes.

Ken

[kenja]

Ok. I'm trying it out now. I've started with a basic script that has the links in place at page load time. Once I get that working, I'll do the AJAX piece. I've got the script on my page as follows:

																			
<script type="text/javascript" src="/viewfadeslide.js">
/*Omni Image View, Fade, and/or Slide Script �2008 John Davenport Scheuer
   as first seen in http://www.dynamicdrive.com/forums/
   username: jscheuer1 - This Notice Must Remain for Legal Use*/
</script>
<a href='/images/partners/4b4f6740dd55dc6cd8910e12935b7036.png' name='image 1' rel='vfsimage::mouseover' rev='vac'></a>
<a href='/images/partners/5541135bfc0bfa922f867aaf6eeb8d29.png' name='image 2' rel='vfsimage::mouseover' rev='vac'></a>
<a href='/images/partners/ac8459cfba6ef22915d7c2b820a275aa.png' name='image 3' rel='vfsimage::mouseover' rev='vac'></a>
<a href='/images/partners/ecd73f1303fb8199d86cdb3624b25f0e.png' name='image 4' rel='vfsimage::mouseover' rev='vac'></a>
<div align="center" valign="middle" id="vac" style="width:165px;height:130px;"></div>

And inside the .js file, I've got the following configuration:

var viewfadeslide = { //place comma after each entry

//Use true or false or object containing boolean values for separate primary load areas

 enableCaption : false, //Should "title" attribute of link and any paired image's 3rd parameter to be used as caption?
 makeTitle : false, //Make title attribute for enlarged image from name attribute of trigger link?
 hideImgMouseOut : false, //Hide enlarged image when mouse moves out of anchor link? (if enlarged image is hyperlinked, always set to false!)
 disableOnClick : true, //Disable default onclick for mouseover triggers?
 populateWithFirst : true, //Fire first link in load area group(s) onload?
 enableCount : false,

//Use true or false

 enableTransition : true, //Enable GradientWipe transition in IE 6+? (if true & not IE or an earlier IE, a fade transition will be attempted)
 forceFade : false, //Ignore GradientWipe capability and go for fade transition in any capable browser? (requires enableTransition : true)

//Use true or false or object containing boolean values or tag name for separate primary load areas

 writeNumberButtons : false, //Also requires element with id of load_area_idNum ex: <div id="loadareaNum"></div>
 writeControlButtons : false, //Also requires element with id of load_area_idControl ex: <span id="loadareaControl"></span>
 
 useButtons : false, //Allows choosing individual Control buttons by numbers, ex:  useButtons : {loadarea: {4 : true, 5 : true}},
 //Works off array: 0 = 'Next', 1 = 'Previous', 2 = 'First', 3 = 'Last', 4 = 'Run', 5 = 'Stop' - otherwise just set to true

 enableSlideShow : true, //Enable slide show(s) use - true/false or {load_area : delay}
 startSlideShow : true,
 swapControlVals : false, //true false or object with boolean values - should running/paused state affect buttons?
//Below three (only valid if slide show running) may use pause or stop, if a load area is not mentioned, nothing will happen for these cases
 slideHoverBehavior : 'stop', //What happens onmouseover of larger images if slide show is running
 slideTriggerBehavior : 'pause', //What happens triggers when are activated if slide show is running
 slideNumberButtonsBehavior : 'stop', //What happens when numbered buttons are clicked if slide show is running

//Set to true only if using lightbox 2.04a add on and lightbox groups
 enableLightBoxGroups : false, //Enable writing out all lightbox group links (lightbox[groupname]) links to a display none div? (true/false only)

Nothing seems to be happening, so I'm suspecting I don't have the settings correct. I'd like it to start displaying images when as soon as it finds the links. I don't want any start buttons, image numbering, or other bells and whistles. Any suggestions?

[jscheuer1]

The config and other code you show looks good enough to run, though it may need some fine tuning to be optimal for your purposes, and I may have missed some minor thing. To really troubleshoot this for you, I would need to see a live demo. It doesn't have to work (obviously). That way I can use my many debugging routines to find the issue(s) preventing it from working.

[kenja]

Oops. I had the include directory for the script wrong. Thanks, Firebug! Now it is working.

My images are sized differently and the cross fade is not looking that great because a smaller image fading into a larger one leaves the border of the last image exposed. Is it possible to do a fade out and then a fade in instead of a cross fade with this script?

[kenja]

This is a very cool script. I hope I can get the image fading issue solved for my odd sized images. I very quickly got the AJAX working with this script. See my code below.

One problem I've found is that if I go to a different tab on my browser for a while and then come back to the tab with the slideshow, the slideshow finishes one transition and then stops fading. I have to reload the page to get it fading again. Is that a configuration issue?

<script type="text/javascript" src="/includes/viewfadeslide.js">
/*Omni Image View, Fade, and/or Slide Script �2008 John Davenport Scheuer
   as first seen in http://www.dynamicdrive.com/forums/
   username: jscheuer1 - This Notice Must Remain for Legal Use*/
</script>

<div align="center" valign="middle" id="vac" style="width:<?=$slider_width?>px;height:<?=$slider_height?>px;"></div>
<div id="targetarea"></div>

<script language="JavaScript">
		var params="";
		var request =  new XMLHttpRequest();
		request.open("GET", '/gsmaps/partner_images.php', true);
		request.setRequestHeader("Content-Type","application/x-javascript;");
		
		request.onreadystatechange = function() {
		    if (request.readyState == 4 && request.status == 200) {
		      if (request.responseText) {
		        var myObject = JSON.parse(request.responseText);
		        var images=new Array();
		        images=myObject.images;
			var imgstring="";
			for(i=0; i<images.length; i++){
			  imgstring=imgstring+'<a href="'+images[i]+'" name="partner image" rel="vfsimage::mouseover" rev="vac"></a>';
			}	
			document.getElementById('targetarea').innerHTML=imgstring;
		      }
		    }
		};
		request.send(params);
</script>