www.webdeveloper.com
Results 1 to 3 of 3

Thread: Slideshow with large slides

  1. #1
    Join Date
    Jul 2012
    Posts
    9

    Slideshow with large slides

    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.

  2. #2
    Join Date
    Jul 2012
    Posts
    9
    I redid it once more and it seems to be happy I'll have to try and change an image and see if it grabs the new image. Current version is bellow.
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>
    Hidden Iframe Slideshow
    </title>
    <style>
    body { cursor:none;overflow:hidden; }
    .nocursor { cursor:none;position:absolute;top:0;left:0; }
    </style>
    <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()
    {
     try
     {
     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();
      var extension=images[item].substr(-4).toLowerCase();
    //  alert(extension);
      head="<html><head></head><body>";
      tail="</body></html>";
      if(extension==".jpg"||extension=="jpeg"||extension=="gif")
      {
       window.frames[item].document.write(head+"<img height=100% width=100% src="+images[item]+">"+tail);
      }
      else
      {
       window.frames[item].document.write(head+"<embed height=100% width=100% src="+images[item]+">"+tail);
      }
      window.frames[item].document.close();
     }
     item=0;
     next();
     document.body.style.cursor = 'none';
     }
     catch(err){alert("bad");}
    }
    </script>
    </head>
    <body onload="init()">
    <div class="nocursor">
    <iframe id="0" height=0 width=0 frameborder=0 marginheight=0 marginwidth=0 scrolling=no></iframe>
    </div>
    <div class="nocursor">
    <iframe id="1" height=0 width=0 frameborder=0 marginheight=0 marginwidth=0 scrolling=no></iframe>
    </div>
    <div class="nocursor">
    <iframe id="2" height=0 width=0 frameborder=0 marginheight=0 marginwidth=0 scrolling=no></iframe>
    </div>
    </body>
    </html>

  3. #3
    Join Date
    Jun 2012
    Posts
    4
    Hi,
    this is a nice code i will also try this code.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles