Menu
I have been trying to develop a slideshow with large slides. I’d like it to work in all later browsers work with both jpgs and swfs. be able to update the slides as they get changed. I had the idea of loading all in iframes and hiding and showing iframes here is the code so far
[code]
<!doctype html>
<html>
<head>
<title>
Hidden Iframe Slideshow
</title>
<script>
var item=0,prev=0;
var myWidth;
var myHeight;
var timeouts;
function next()
{
document.getElementById(prev).height=0;
document.getElementById(prev).width=0;
document.getElementById(prev).contentDocument.location.reload(true);
if(item>=window.frames.length){item=0;}
document.getElementById(item).height=myHeight+”px”;
document.getElementById(item).width=myWidth+”px”;
prev=item;
setTimeout(“next()”,timeouts[item]);
item++;
}
function init()
{
if( typeof( window.innerWidth ) == ‘number’ )
{//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
}
else if( document.documentElement && (document.documentElement.clientWidth||document.documentElement.clientHeight))
{//IE 6+ in ‘standards compliant mode
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
}
else if(document.body&&(document.body.clientWidth||document.body.clientHeight))
{//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
images=new Array(“http://www.mvdwebexpress.com/adsImages/MCGINNIS.swf”,”http://www.mvdwebexpress.com/adsImages/RocktheboatAD.jpg”,”http://www.mvdwebexpress.com/adsImages/New_Hires_In_Offices.jpg”);
timeouts=new Array(18000,6000,6000);
for(item=0;item<window.frames.length;item++)
{
window.frames[item].document.open();
if(images[item].substr(-3).toLowerCase()==”jpg”)
{
window.frames[item].document.write(“<html><head></head><body><img height=100% width=100% src=”+images[item]+”></body></html>”);
}
else
{
window.frames[item].document.write(“<html><head></head><body><embed height=100% width=100% src=”+images[item]+”></embed></body></html>”);
}
window.frames[item].document.close();
}
item=0;
next();
}
</script>
<style>
body {
overflow: hidden;
}
</style>
</head>
<body onload=”init()”>
<div style=”position:absolute;top:0;left:0″>
<iframe id=”0″ height=0 width=0 frameborder=0 marginheight=0 marginwidth=0 scrolling=no></iframe>
</div>
<div style=”position:absolute;top:0;left:0″>
<iframe id=”1″ height=0 width=0 frameborder=0 marginheight=0 marginwidth=0 scrolling=no></iframe>
</div>
<div style=”position:absolute;top:0;left:0″>
<iframe id=”2″ height=0 width=0 frameborder=0 marginheight=0 marginwidth=0 scrolling=no></iframe>
</div>
</body>
</html>
Current issues:
IE: some images still load when I unhide the iframe. (not bad)
Firefox: when reloading a slide in the background it displays a message at the bottom of the screen
Chrome: It displays a white box over all slides making it useless.(found this out by changing the frameborder)
The reason I chose the iframe method was I had previous good experiences getting iframes to hide and unhide using javascript in the past. Also I figured if all the slides are loaded in their frames they should display instantly when the frame is unhidden(no need to download). The only reason firefox displays the message is because of the document.getElementById(prev).contentDocument.location.reload(true);
which I do to look for updates to the image is there a way with ajax to tell if the image was updated?
Is there a simple fix for chrome?
Is there a better html/javascript method to do what I’d like to do.
Remember these are large slides so it takes time to reget each image; longer than the time I want to display the slides for. It is required that some slides be in the jpg format and that some are swf files.