PDA

View Full Version : Ultimate Slideshow won't work with AJAX image retrieval



kenja
11-18-2008, 07:17 PM
1) Script Title:
Ultimate Fade in Slideshow (v.1.51
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.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
11-19-2008, 04:13 AM
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
11-19-2008, 04:23 AM
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
11-19-2008, 05:23 AM
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
11-19-2008, 05:46 AM
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
11-20-2008, 11:05 PM
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
11-21-2008, 08:25 PM
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
11-21-2008, 08:43 PM
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
11-21-2008, 09:15 PM
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
11-21-2008, 09:40 PM
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>

kenja
11-21-2008, 10:20 PM
I turned off the fading all together for now and that seems to be working pretty well. Another question about the script, though... I tried to minify it and can't seem to get it working with any of the minifiers out there. No script errors are being thrown in Firebug, so I'm not sure what's going on. Have you tried minifying it before?

Check it out here: http://compressorrater.thruhere.net/

jscheuer1
11-22-2008, 10:13 AM
The issue with larger images remaining behind smaller ones is because the script uses background image as part of the fade routine. I can change that by creating a second element or set of elements to hold the images, similar to ddadmin's U Fade and (my) Swiss Army, and think I will but that will take little time to work out.

I haven't compressed the script code in its current form, but had used jsmin successfully on an earlier version. However, since virtually all script compressors (including jsmin) strip comments, those that do will take out:


testforfilters : function(){
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
if(this.enableTransition && navigator.appVersion.replace(/^.*MSIE (\d+).*$/, '$1') >= 6)
try {
this.iefiltercapable = document.documentElement.filters;
this.iefilterstring = this.forceFade? 'progid:DXImageTransform.Microsoft.Fade(Duration=1.2)' : //IE 6+ specific multimedia filter strings
'progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.9)';
} catch(e){this.iefiltercapable = null};
else this.iefiltercapable = null;
if(this.iefiltercapable === null && navigator.appVersion.replace(/^.*MSIE (\d+\.\d+).*$/, '$1') >= 5.5)
try {
this.iefadecapable = document.documentElement.filters;
this.iefadestring = 'progid:DXImageTransform.Microsoft.Alpha(opacity='; //IE 5.5+ specific opacity filter string
} catch(e){this.iefadecapable = null};
else this.iefadecapable = null;
@end @*/
if(this.enableTransition && this.iefiltercapable === false){
var ft = function(o){return typeof document.documentElement.style[o] == 'string'? o : false;};
for (var f = ['-Ktml-Opacity', '-Moz-Opacity', 'opacity'], i = f.length - 1; i > -1; --i){
this.ft = ft(f[i]);
if(this.ft){
this.fadecapable = true;
break;
}
};
}
},

So it must be reinserted at the proper place after compression. I also tried packing the code, but that didn't work. I haven't tried any other methods.

If you choose to minify any javascript code, you should be familiar with the requirements of the minifier and make sure that the code meets them.

I'm considering packing the code once it is finalized. When and if I get to that point and still want to pack it, I will need to go through it to make sure it all qualifies for packing.

jscheuer1
11-22-2008, 06:02 PM
OK, the fading of various sized images has been fixed. I chose to drop support for gradient wipe in IE completely though as a result. This should not affect you because you were going for fade not wipe in IE, if I recall correctly.

The script and demo page have both changed, be sure to refresh your browser so as not to be viewing a cached copy of the files or their source code.

BTW, with the same proviso I mentioned earlier, the code still compresses just fine with jsmin.