title: hiding div until fully loaded and adding fade effect on js onclick slider
body: <p>I've never written codes but I'm building my own photography page. It's a simple idea; just an onclick slideshow. I could accomplish that by creating a div containing the images and using js for the onclick effect. However, I can see all the images loading before the slides hide behind the 1st image and was wondering if there's anyway to hide the div until the content is fully loaded. Also, I'd like to add a fade ou/in effect between each image. Can someone give me a light on it? My code until now is:</p>
  
  <pre><code>&lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;style type="text/css"&gt;
  .middle {
      text-align: center;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body class="middle"&gt;
  &lt;p&gt;&lt;img src="header.jpg" width="131" height="21" alt="guilimora" /&gt;&lt;/p&gt;
  &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  &lt;p&gt;&lt;span style="text-align: center"&gt;&lt;/span&gt;&lt;/p&gt;
  
  &lt;div id="imgs"&gt;
    &lt;div align="center"&gt;
    &lt;img src="../PHOTOGRAPHS/01-yankees bitch.jpg" alt="img1" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/02-where the sun shines best.JPG" alt="img2" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/03-keep on rolling.jpg" alt="img3" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/04-534 am.JPG" alt="img4" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/05-penguin smokes.jpg" alt="img5" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/06-quaint.jpg" alt="img6" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/07-downtown mary.JPG" alt="img7" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/08-untitled.jpeg" alt="img8" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/09-14190012.jpg" alt="img9" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/10-30470064.JPG" alt="img10" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/11-30460001.JPG" alt="img11" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/12-no trees.JPG" alt="imh12" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/13-little you or smaller I.jpg" alt="img13" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/14 - salvation.jpeg" alt="img14" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/15-afterlight-343.jpeg" alt="img15" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/16 afterlight-233 2.jpg" alt="img16" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/17 80760026.JPG" alt="img17" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/18 49750012.jpg" alt="img18" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/19 nope.JPG" alt="img19" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/20 30470138.JPG" alt="img20" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/21 93470016.JPG" alt="img21" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/22 babe the beer.jpg" alt="img22" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/23 08450037.jpg" alt="img23" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/24 ny.jpg" alt="img24" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/25 - bruised benja.jpg" alt="img25" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/26 - madam m.jpg" alt="img26" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/27 51770018.JPG" alt="img27" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/28 23700024.jpg" alt="img28" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/29 49630021 trat.jpg" alt="img29" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/30 afterlight-324.jpeg" alt="img30" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/31 IMG_1078 trat.jpg" alt="img31" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/32 05810018 copy.jpg" alt="img32" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/33 - wanna go wanna go wanna go.jpg" alt="img33" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/34 46080021.jpg" alt="img34" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/35 Image-1-1.jpg" alt="img35" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/36 Image-1-11 copy.jpg" alt="img36" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/37 30460024.JPG" alt="img37" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/38 smoking on my way to.jpg" alt="img38" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/39 where does she go.jpg" alt="img39" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/40 IMG_1264.jpg" alt="img40" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/41 44170017.JPG" alt="img41" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/42 49750004.jpg" alt="img42" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/43 30470029 trat.jpg" alt="img43" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/44 afterlight-266.jpeg" alt="img44" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/45 91930027.JPG" alt="img45" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/46 91930008 copy.jpg" alt="img46" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/47 49750028.jpg" alt="img47" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/48 93470001.jpg" alt="img48" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/49 afterlight-32.jpg" alt="img49" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/50 03140034.JPG" alt="img50" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/51 04500006.jpg" alt="img51" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/52 30470008.jpg" alt="img52" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/53 Image-1.jpg" alt="img53" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/54 handsome julio.jpg" alt="img54" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/55 30470046.JPG" alt="img55" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/56 80760027 copy.jpg" alt="img56" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/57 30470019 5.jpg" alt="img57" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/58 0283035.jpg" alt="img58" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/59 30470080.JPG" alt="img59" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/60 IMG_3936.jpg" alt="img60" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/61 sf.jpg" alt="img61" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/62 01360034.jpg" alt="img62" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/63 afterlight-332.jpeg" alt="img63" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/64 afterlight-264.jpeg" alt="img64" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/65 afterlight-237.jpeg" alt="img65" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/66 30470106 copy.jpg" alt="img66" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/67 unti.JPG" alt="img67" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/68 04470013.jpg" alt="img68" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/69 80770023.JPG" alt="img69" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/70 afterlight-347.jpeg" alt="img70" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/71 ntitled.jpg" alt="img71" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/72 DSC03987 2.jpg" alt="img72" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/73 80760030 copy.jpg" alt="img73" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/74 afterlight-244.jpg" alt="img74" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/75 i67487664.jpg" alt="img75" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/76 DSC02973.JPG" alt="img76" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/77 80760029 copy.jpg" alt="img77" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/78 IMG_1347 2.jpg" alt="img78" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/79 IMG_1068.JPG" alt="img79" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/80 IMG_2219.JPG" alt="img80" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/81 30460025.JPG" alt="img81" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/82 03170008.jpg" alt="img82" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/83 CIMG0062 trat.jpg" alt="img83" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/84 IMG_1058 3.jpg" alt="img84" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/85 afterlight-338.jpeg" alt="img85" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/86 49750024.jpg" alt="img86" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/87 untitled.jpg" alt="img87" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/88 IMG_1775 trat.jpg" alt="img88" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/89 30460023.JPG" alt="img89" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/90 IMG_1271 trat 1.jpg" alt="img90" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/91 afterlight-306 2.jpeg" alt="img91" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/92 DSC04375.jpg" alt="img92" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/93 death and all the rest.jpg" alt="img93" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/94 afterlight-284.jpeg" alt="img94" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/95 DSC03209.jpg" alt="img95" height="500" width="auto"/&gt;
    &lt;img src="../PHOTOGRAPHS/96 74860030 trat.jpg" alt="img96" width="auto" height="500" class="imgs"/&gt;
    &lt;/div&gt;
  
  
  &lt;script type="text/javascript"&gt; 
   var port_imgs, i;
      window.onload = function () {
              //get all the images in "#imgs"
          port_imgs = document.getElementById("imgs").getElementsByTagName("img");
             //loop through, hiding them all
          for (i = 0; i &lt; port_imgs.length; i++) {
              port_imgs[i].style.display = "none";
                      //wire up the click event and do the magic
              port_imgs[i].onclick = (function (k) {
                  var r = function () {
                      this.style.display = "none";
                      if (k &gt;= port_imgs.length) { k = 0 }
                      port_imgs[k].style.display = "block";
                  };
                  return r;
              })(i+1);
          }
              //un-hide (display) the first image so we're all set to go
          port_imgs[0].style.display = "block";
      }
  &lt;/script&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>