slideshowI

[ComputerSnack]

I am trying to implement a slideshow on a web page, however it does not work in any version of Internet Explorer. In addition, I would like to further modify it to crossfade the images as they change, but for now I at least want it to work in IE. I ran across a website that seems to do exactly what I want, but I have another issue. It needs to be able to be a background-image of a table.

http://www.cryer.co.uk/resources/jav...2slideshow.htm

So, here is my current script:

<div id="myDiv">
    
</div>

<script language="javascript">

var imgurl = new Array(
"/uimg/image/1281074682525/1285481996852.jpg",
"/uimg/image/1281074682525/1285481996880.jpg",
"/uimg/image/1281074682525/1285481996856.jpg",
"/uimg/image/1281074682525/1285481996873.jpg",
"/uimg/image/1281074682525/1285481996884.jpg",
"/uimg/image/1281074682525/1285481996843.jpg");

function imagerotate(i) {
      if(i>=imgurl.length)
          i=0;
    var stylecode = "<style type='text/css' media='screen'>.header_table {background: url(" + imgurl[i] + ") right no-repeat;}</style>";

document.getElementById('myDiv').innerHTML=stylecode;
document.getElementById('preloadDiv').innerHTML="<img src='" + imgurl[i+1] + "' width=1 height=1>";

      window.setTimeout("imagerotate(" + (i+1) + ")",5000);
  }

imagerotate(0);


</script>

Thank you.

[jscheuer1]

It could simply be that the code in your post is inside a table. That would prevent it from working in IE. But it could be other things or more than one thing.

If that's all it is, try moving the code to the last thing before the closing </body> tag of the page. But if your markup is non-standard, that might not help in IE.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

[ComputerSnack]

Unfortunately I am limited on where I can place the code on the page, so hopefully it can work. Here is the URL of the page if you want to check it out. Thanks!

http://glendorausd-ca.schoolloop.com/

[jscheuer1]

Limited? Where can it go? What exactly are the options there? IE is probably just not responding to a style section being imported via innerHTML to a div (which by rights belongs in the body section and may well appear there in the DOM of the page) in the head while neither the head nor body are parsed yet. Come to think of it, I don't believe IE imports a style section that way (via innerHTML) regardless of where it's being imported to or when it's being imported. If it could go after:

<script type="text/javascript" src="http://cdn.schoolloop.com/1010281645/static/lib/jquery_old/1.3/jquery-1.3.2.min.js"></script>

in the javascript section, it could use jQuery methods. Even where it's at, it should probably use some sort of onload detection (which would be faster and more efficient if it could use jQuery) and then instead of inserting a style section, simply rotate the background image of the table.

Other alternatives to try would be to simply put a stylesheet link there and rotate its href attribute. Or have all of the stylesheet links there, with all but one as alternates, then rotate which one is not an alternate.



As a side note for now, to get it to fade, you would have to set it up as a separate slideshow positioned underneath the table whose background would then be transparent. At that rate it would no longer need to be a background image.

[ComputerSnack]

Thanks for the reply John. The code must be in the header section, that is my limitation in order to have it appear on every page of the site. I can put stuff in the body, but that only works for a particular page.

Is there a way to place an image within a div without having any code already inside that div? And also without the div having an id (but id does have a class).

I guess for now I just want the slideshow to work in IE.

[jscheuer1]

OK, so we can go in the head and use jQuery, great! Get rid of the old script and markup:

<!--adds rotating photos to banner--> <!--preload banner images and slideshow--> <div id="preloadDiv" style="width: 1px; height: 1px; visibility:hidden"></div> <div id="preloadDiv2" style="width: 1px; height: 1px; visibility:hidden"><img src="/uimg/image/1281074682525/1281197417300.jpg" height=1 width=1><img src="/uimg/image/1281074682525/1281197420672.jpg" height=1 width=1></div>  <div id="myDiv">      </div>  <script language="javascript"> var imgurl = new Array( "/uimg/image/1281074682525/1285481996880.jpg", "/uimg/image/1281074682525/1285481996852.jpg", "/uimg/image/1281074682525/1285481996856.jpg", "/uimg/image/1281074682525/1285481996873.jpg", "/uimg/image/1281074682525/1285481996884.jpg", "/uimg/image/1281074682525/1285481996843.jpg");  function imagerotate(i) { if(i>=imgurl.length)  i=0;    var stylecode = "<style type='text/css' media='screen'>.header_table {background: url(" + imgurl[i] + ") right no-repeat;}</style>"; document.getElementById('myDiv').innerHTML=stylecode; document.getElementById('preloadDiv').innerHTML="<img src='" + imgurl[i+1] + "' width=1 height=1>"; window.setTimeout("imagerotate(" + (i+1) + ")",5000);   }  imagerotate(0); </script> <!--end rotating banner edit-->

Add this (highlighted) as shown:

<!-- begin JS Section local_js=-->
    <script type="text/javascript" src="http://cdn.schoolloop.com/1010281645/static/lib/jquery_old/1.3/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
(function($){
	$('head').append('<style type="text/css">.header_table {background: right no-repeat}<\/style>');
	$.each(['/uimg/image/1281074682525/1281197417300.jpg', '/uimg/image/1281074682525/1281197420672.jpg'], function(i, im){
		$(new Image()).attr('src', im);
	});
	var imgurl = [
		'/uimg/image/1281074682525/1285481996880.jpg',
		'/uimg/image/1281074682525/1285481996852.jpg',
		'/uimg/image/1281074682525/1285481996856.jpg',
		'/uimg/image/1281074682525/1285481996873.jpg',
		'/uimg/image/1281074682525/1285481996884.jpg',
		'/uimg/image/1281074682525/1285481996843.jpg' //<-- No comma after last image!
		], $table, its = false;
		function imagerotate(i){
			$table = $('.header_table');
			if(!$table.size()){
				setTimeout(function(){imagerotate(0);}, 300);
				return;
			}
			if(i >= imgurl.length){
				i = 0;
				if(i){
					its = true;
				}
			}
			$table.css({backgroundImage: 'url(' + imgurl[i] + ')'});
			if(!its){
				$(new Image()).attr('src', imgurl[i+1]);
			}
			setTimeout(function(){imagerotate(i+1);}, 5000);
		}
		imagerotate(0);
})(jQuery);
</script>
    <script type="text/javascript" src="http://cdn.schoolloop.com/1010281645/static/lib/jquery/1.4/js/jquery-ui-1.8.1.custom.min.js"></script>
    
    <script type="text/javascript" src="/javascript/version_1010281645/master.js"></script>    

    <script type="text/javascript" src="http://cdn.schoolloop.com/1010281645/static/lib/jquery/extra/js/jquery.form.js"></script>

    <script type="text/javascript" src="http://cdn.schoolloop.com/1010281645/static/lib/jquery_old/jScrollPane.js"></script>

Notes:

This added script may be made external.

You should update to jQuery 1.4.2 - anything that works with 1.3.2 will work with it, and 1.4.2 is more efficient.

To answer your question about adding a div the page, sure you can do that. But that can't really be done from the head unless you first determine that where you want to add it has been sufficiently parsed by the browser to permit it. Sort of like in my code where I wait until the table is there to set its background image.

[ComputerSnack]

Thanks John, I really appreciate your help here. So it works in all browsers well. So is there any way to make them fade into each other?

Secondly, is there a way to allow this to be placed in the header section instead of the body?

-Kevin

[jscheuer1]

Getting it to fade is a whole other matter. As I said before about that:

As a side note for now, to get it to fade, you would have to set it up as a separate slideshow positioned underneath the table whose background would then be transparent. At that rate it would no longer need to be a background image.

In other words, you could use just about any fading image slideshow. The trick would be positioning it (layout wise) where it needs to go.

As for going in the head section - reread my previous post. Look carefully at the second code block. The head section is where I suggested that it go.