...

View Full Version : problem with a cross fade slideshow



ms1972
07-16-2012, 10:48 PM
I have an "jpeg slideshow" on a HTML page created using Javascript. It works fine in Firefox, Chrome & Safari but loads slowly in Seamonkey and does not load at all in Internet Explorer. The slideshow does have 46 images .... Is that a problem ?


Here is the page on the website: http://www.victorrossi.com/home2.htm

Here is the code with the Javascript enabled "jpeg slideshow":


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Victor Rossi - Private Label and Couture</title>
<style type="text/css">
body { background-color:#FFF; margin-top:0; margin-left:0;
/*bgcolor="#FFFFFF" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" */
}
p { color:#808080; font-size:medium;
/*font color= size=3 */
}
td {color:#808080; }
#center{text-align:center; font-weight:bold;}
#table {position:absolute; margin-left:25%;
}
#menu, #logo {text-align:center; }
#menu {font-weight:bold; }
#img {height:400px; width:auto; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.victorrossi.com/fadeslideshow.js">
</script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1",
dimensions: [700, 400],
imagearray: [
["http://www.victorrossi.com/1.jpg"],
["http://www.victorrossi.com/2.jpg"],
["http://www.victorrossi.com/3.jpg"],
["http://www.victorrossi.com/4.jpg"],
["http://www.victorrossi.com/5.jpg"],
["http://www.victorrossi.com/6.jpg"],
["http://www.victorrossi.com/7.jpg"],
["http://www.victorrossi.com/8.jpg"],
["http://www.victorrossi.com/9.jpg"],
["http://www.victorrossi.com/10.jpg"],
["http://www.victorrossi.com/11.jpg"],
["http://www.victorrossi.com/12.jpg"],
["http://www.victorrossi.com/13.jpg"],
["http://www.victorrossi.com/14.jpg"],
["http://www.victorrossi.com/15.jpg"],
["http://www.victorrossi.com/16.jpg"],
["http://www.victorrossi.com/17.jpg"],
["http://www.victorrossi.com/18.jpg"],
["http://www.victorrossi.com/19.jpg"],
["http://www.victorrossi.com/20.jpg"],
["http://www.victorrossi.com/21.jpg"],
["http://www.victorrossi.com/22.jpg"],
["http://www.victorrossi.com/23.jpg"],
["http://www.victorrossi.com/24.jpg"],
["http://www.victorrossi.com/25.jpg"],
["http://www.victorrossi.com/26.jpg"],
["http://www.victorrossi.com/27.jpg"],
["http://www.victorrossi.com/28.jpg"],
["http://www.victorrossi.com/29.jpg"],
["http://www.victorrossi.com/30.jpg"],
["http://www.victorrossi.com/31.jpg"],
["http://www.victorrossi.com/32.jpg"],
["http://www.victorrossi.com/33.jpg"],
["http://www.victorrossi.com/34.jpg"],
["http://www.victorrossi.com/35.jpg"],
["http://www.victorrossi.com/36.jpg"],
["http://www.victorrossi.com/37.jpg"],
["http://www.victorrossi.com/38.jpg"],
["http://www.victorrossi.com/39.jpg"],
["http://www.victorrossi.com/40.jpg"],
["http://www.victorrossi.com/41.jpg"],
["http://www.victorrossi.com/42.jpg"],
["http://www.victorrossi.com/43.jpg"],
["http://www.victorrossi.com/44.jpg"],
["http://www.victorrossi.com/45.jpg"],
["http://www.victorrossi.com/46.jpg"],
],
displaymode: {type:'auto', pause:500, cycles:0, wraparound:false},
persist: false,
fadeduration: 500,
descreveal: "ondemand",
togglerid: ""
})
</script>
</head>
<body >
<center>
<img id="display" src="VR-logo.jpg" width="157px" height="33px"><br>
<b>
<a href="home.htm">Home</a> |
<a href="catalog.htm">Catalog</a> |
<a href="gallery.htm">Fashion Gallery</a> |
<a href="size.htm">Size Chart</a> |
<a href="media.htm">In the Media</a> |
<a href="about.htm">About Us</a> |
<a href="contact.htm">Contact</a>
</b>
<p><hr width=50%><p>
<table cellspacing=0 cellpadding=0 width="702" border=0>
<tr>
<td valign=top>
<id="center"><b>Victor Rossi has evolved from its custom couture design roots into one of the world's most reliable design houses, private label
manufacturers and global sourcing agents. Our combination of innovation, stellar craftsmanship, exceptional customer and client care are our hallmarks.</b>
<div id="fadeshow1"></div>
<p><hr width=25%><p>
</td></tr>
<tr><td align=center>
<FORM METHOD=POST ACTION="http://us.1.p10.webhosting.yahoo.com/forms?login=singh100">
<b><font color=#808080 size=3>Join the Victor Rossi mailing list !</b></font><br>
<table border=0>
<tr><td><font color=#808080>name:<BR>
e-mail: <BR></td>
<td><INPUT size=27 name="name"><br>
<INPUT size=27 name="e-mail"></font></td></tr>
<tr><td colspan=2 align=center><INPUT type=submit value="Submit to Victor Rossi">
<INPUT NAME=subject TYPE=HIDDEN VALUE="e-mail list">
<input type="hidden" name="required_fields" value="name,e-mail">
<input type="hidden" name="next_url" value="http://victorrossi.com/thankyou.htm">
</FORM>
</td></tr>
</table>
</td></tr>
</table>
</center>
</body>
</html>
<!-- text below generated by server. PLEASE REMOVE --><!-- Counter/Statistics data collection code --><script language="JavaScript" src="http://l.yimg.com/d/lib/smb/js/hosting/cp/js_source/whv2_001.js"></script><script language="javascript">geovisit();</script><noscript><img id="display" src="http://visit.webhosting.yahoo.com/visit.gif?us1341942141" alt="setstats" border="0" width="1" height="1"></noscript>

Old Pedant
07-16-2012, 10:57 PM
It runs the same in MSIE 9 as it does in FF.

BOTH have some minor glitches because you apparently aren't waiting to begin the fades until all the images are fully loaded. (Once the images have loaded and are cached, both browsers work fine when re-visiting the pages.) The glitch is that only half the image appears and then finishes loading when you get to about the 3rd or 4th image in sequence. Clearly, the browser had not finished loading the image by the time you wanted to display it.

I'd strongly suggest that you show a FIXED image to begin with and then not start the fading until all images are known to be fully loaded.

I don't use jQuery so I won't try to tell you how to do that.

If the code doesn't work in earlier versions of IE and/or in other browsers, then I'd guess that the version of jQuery you are using may have a bug. But I certainly don't know that.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum