I Now Display My Slideshow Images In Their Original Dimensions

I used to display my slideshow images all with the same dimensions.
This was to make sure that the images stayed in their alloted space on my homepage.
Unfortunately, this would change the aspect ratios of some images to an unacceptable degree.
I'm displaying all the images now with their original dimensions, so none of them get funny looking.
This blog is about how I did that, but it's also one of my ongoing blogs about how my homepage
gets me to look up how to do do web stuff (and use up my time).

I was just reading this blog and realized that first time visitors to my website might start reading blogs from the bottom up (latest first) and not know anything about my slideshow. I crawl the internet for images and write their URL to a file when I find them. When the file is written to, an AJAX script (look that up on the Internet if you don't know what that is) is alerted and reads the URL; the data parameter in an object tag (this works better for me then an img tag) is changed to the newly found URL value. This worked hassle free when I was using HTML 4, but with HTML 5 I found I needed to use an iFrame (something else you might want to look up). iFrames are basically windows in your web page to different web pages; i.e. the slideshow isn't coded into my homepage, but my homepage has a window to the page that does run the slideshow (this is seamless to the visitor). So the dimensions of the image are set in the page being displayed by the iFrame. OK, that's enough background information for this blog, so on to the original blog text:  

I display my slideshow in an iFrame. You can set the dimensions of the iFrame to whatever you'd like it to be, but that doesn't change anything on the webpage you're displaying in the iFrame (if that doesn't make sense to you, go ahead and look up iFrames on the Internet). The underlying webpage for the iFrame used to be NewGas.html, and the images were displayed using up 100% of the width and height of the webpage. This meant that I was probably changing the dimensions of the slideshow images, and hence their aspect ratios; i.e., the pictures were already funny looking before you saw them in the iFrame. So I needed to set the image dimensions in the underlying webpage. Changing the dimensions of the iFrame looked like it was having an effect on the image's aspect ratios, but I neeeded to fix the underlying problem; I was letting the image fill up the underlying webpage, causing it to look out of proportion.

I modified NewGas.html to display the images with their original dimensions, and renamed it NewerGas.html This means that some images will no longer fit in the alloted space for the slideshow. My workaround was to add a link to NewerGas.html that displays it in it's own page; my visitors can turn on a song and watch a slideshow in another window (or tab). Here's my html - for ScaledGas.html (note added 02/07/2016). My search program would come across some humongous image files, and they looked too funny - just a tiny part of the image would be viewable on my homepage. ScaledGas.html checks to see if the image file is wider then 557px (the widest image that will comforably display in my slideshow when viewed on my 1920px wide monitor) and scales it if it is that wide. This means I don't scale thumbnails (it would make them fuzzy looking) but humongous image files do get scaled. I probably should have checked for the width of the displaying document and scaled the image to be 29% as wide as that (the right side division is 29% as wide as my homepage is in total) but I'm worried that the visitor's JavaScript might not work the same way as the JavaScript on my system (I only trust assembly language) and he/she will see an image that is scaled funny. In any case, this reminds me that I really need to check for mobile devices and scale differently for those (next project - probably next weekend, as of this writing). BTW the link to see my slideshow full screen still goes to NewerGas.html.

New Note (02/08/2016). I now trust JavaScript. I was watching my slideshow while I was at work, on my cell phone; the pictures looked OK until you realized they were truncated. I replaced the constant 557 (see the paragraph above) with document.body.offsetWidth and my pictures scale the same in every browser:


<html>
 <head>
 <title>Classical Gas</title>
 <script language = "javascript">
    var handleCntr = 0;
    var SpockArr = [];
    var oldText = new String("DavePics/MB300SLR.jpg");
    SpockArr[0] = "DavePics/Spock/AlternateUniverse.jpg";
    SpockArr[1] = "DavePics/Spock/Cat.jpg";
    SpockArr[2] = "DavePics/Spock/Combat.jpg";
    SpockArr[3] = "DavePics/Spock/Disbelief.jpg";
    SpockArr[4] = "DavePics/Spock/Fascinating.jpg";
    SpockArr[5] = "DavePics/Spock/GirlFriend.jpg";
    SpockArr[6] = "DavePics/Spock/GuideToDating.jpg";
    SpockArr[7] = "DavePics/Spock/LiveLongAndProsper.jpg";
    SpockArr[8] = "DavePics/Spock/Logic.jpg";
    SpockArr[9] = "DavePics/Spock/MindMeld.jpg";
    SpockArr[10] = "DavePics/Spock/MovieSpock.jpg";
    SpockArr[11] = "DavePics/Spock/One.jpg";
    SpockArr[12] = "DavePics/Spock/Phaser.jpg";
    SpockArr[13] = "DavePics/Spock/Pilot.jpg";
    SpockArr[14] = "DavePics/Spock/RaisedEyebrow.jpg";
    SpockArr[15] = "DavePics/Spock/ArcherVulcanSaute.jpg";
    SpockArr[16] = "DavePics/Spock/SpockAndUhuru.jpg";
    SpockArr[17] = "DavePics/Spock/SpockInside.jpg";
    SpockArr[18] = "DavePics/Spock/SpockOnVulcan.jpg";
    SpockArr[19] = "DavePics/Spock/SpockOutside.jpg";
    SpockArr[20] = "DavePics/Spock/SpockRedBackground.jpg";
    SpockArr[21] = "DavePics/Spock/SpockShip.jpg";
    SpockArr[22] = "DavePics/Spock/StarWars.jpg";
    SpockArr[23] = "DavePics/Spock/Sunset.jpg";
    SpockArr[24] = "DavePics/Spock/T'Pol.jpg";
    SpockArr[25] = "DavePics/Spock/T'PolAndDoctor.jpg";
    SpockArr[26] = "DavePics/Spock/T'PolBaby.jpg";
    SpockArr[27] = "DavePics/Spock/T'PolBridge.jpg";
    SpockArr[28] = "DavePics/Spock/T'PolPhaser.jpg";
    SpockArr[29] = "DavePics/Spock/T'PolTrip.jpg";
    SpockArr[30] = "DavePics/Spock/Tricorder.jpg";
    SpockArr[31] = "DavePics/Spock/VulcanLegionOfHonor.jpg";
    SpockArr[32] = "DavePics/Spock/WhiteBackground.jpg";
    SpockArr[33] = "DavePics/Spock/Surak.jpg";
    SpockArr[34] = "DavePics/Spock/T'PolArmed.jpg";
    SpockArr[35] = "DavePics/Spock/T'PringAndSpock.jpg";
    SpockArr[36] = "DavePics/Spock/Selfie.jpg";

     // Used to detect whether the users browser is an mobile browser
        function isMobile()
        {           
            ///<summary>Detecting whether the browser is a mobile browser or desktop browser</summary>
            ///<returns>A boolean value indicating whether the browser is a mobile browser or not</returns>

            if (sessionStorage.desktop) // desktop storage
                return false;
            else if (localStorage.mobile) // mobile storage
            return true;

            // alternative
            mobile = ['iphone','ipad','android','blackberry','nokia','opera mini','windows mobile','windows phone','iemobile'];
            for (var i in mobile) if (navigator.userAgent.toLowerCase().indexOf(mobile[i].toLowerCase()) > 0) return true;

            // nothing found.. assume desktop
            return false;
        }
       
    function getDataReturnText(dataSource, callback)
    {
       var XMLHttpRequestObject = false;
            
       if (window.XMLHttpRequest)
       {
          XMLHttpRequestObject = new XMLHttpRequest();
       }
       else if (window.ActiveXObject)
       {
          XMLHttpRequestObject = new
          ActiveXObject("Microsoft.XMLHTTP");
       }

       if(XMLHttpRequestObject)
       {
          XMLHttpRequestObject.open("GET", dataSource);

          XMLHttpRequestObject.onreadystatechange = function()
                                              {
                                                 if (XMLHttpRequestObject.readyState == 4 &&
                                                     XMLHttpRequestObject.status == 200)
                                                 {
                                                    callback(XMLHttpRequestObject.responseText);
                                                 }
                                              }

          XMLHttpRequestObject.send(null);
       }
    }

    function callback(text)
    {
       var cntr = randomnumber=Math.floor(Math.random()*SpockArr.length);   
       if ((text.toLowerCase().indexOf("http") == -1) || (text.toLowerCase().indexOf("trans.gif") > -1))
       {
           text = "SpockArr[cntr]";
       }
       if (text.toLowerCase().indexOf('trans') > -1)
       {
          text = "DavePics/MB300SLR.jpg";
       }
      
       //write to the data file only if we have a new image
       if (text != oldText)
       {
          var img = new Image();

          img.onload = function()
         {
            var height = img.height;
            var width = img.width;
            var imgDivWidth = document.body.offsetWidth;           
            var moby = isMobile();
           
            if (moby)
            {
               imgDivWidth *= 0.87;
            }
           
            if (width == 0)
            {
               document.getElementById("imageObject").height = 540;
               document.getElementById("imageObject").width = 490;
               document.getElementById("imageObject").data = "DavePics/BettyPageBikini.jpg";
            }
            else if (width > imgDivWidth)
            {                                                      
               document.getElementById("imageObject").style.height = height * imgDivWidth/width;
               document.getElementById("imageObject").style.width = imgDivWidth;
               document.getElementById("imageObject").data = text;
            }
            else
            {
               document.getElementById("imageObject").height = height;
               document.getElementById("imageObject").width = width;
               document.getElementById("imageObject").data = text;
            }
            oldText = new String(text);                 
         }
         img.src = text;        
       }        
       setTimeout( "getDataReturnText('scripts/data.txt', callback);",10);              
    }
 </script>
 </head>

 <body onload="getDataReturnText('scripts/data.txt', callback)">              
    <div id="targetDiv">
        <OBJECT id="imageObject" data="DavePics/GirlOnGullwing.jpg" type="image/jpeg" style="width: auto; height: auto; max-height: 100%">          
           <img src="DavePics/512SProduction.jpg" alt="Ferrari 512S" style="width: auto; height: auto" />            
        </OBJECT> 
    </div>       
 </body>
</html>




  The Ferrari 512S image is what I display when the image in the slideshow is missing. I already know the 512S image is 798 px by 524 px, so I hard coded that, but the dimensions of every picture is discovered dynamically and the display dimensions are set to those values. BTW, I really needed to review my code. I set the conditions for certain images that I needed to replace with other images (e.g., if the image had the string 'trans' in it's name - probably a transparent gif, so I wouldn't want to "display" it, but display one of my own images), but I had messed up the condition of an image with zero size; it's fixed now.

Return To My Blog Page       Return To My Programming Page