title: Javascript/Fancybox Error?
body: <p>On my page I have 6 boxes below a main image that uses JS to have a nice fade in effect. On this page I also have Fancybox Load at the start of the page (using onload) to show an image that the user needs to see. </p>
  
  <p>The issue is when the user first loads the page one of the boxes will barely show here is a screenshot of the issue: <a href="http://screencast.com/t/ROU61nMSgzy" rel="nofollow">http://screencast.com/t/ROU61nMSgzy</a>  </p>
  
  <p>The question is how do I resolve this so this issue does not happen?  Note: Once the page is cached this issue does not happen.</p>
  
  <p>Here is the JS for the boxes: </p>
  
  <pre><code>var $j = jQuery.noConflict();
  
  $j(document).ready(function(){
  Engine.Initialize();
  if( !$j('body').hasClass('index') &amp;&amp; !$j('body').hasClass('homepage') ) {
  }
  });
  
  var Engine = {
  
  Initialize: function() {
      Engine.Homepage_Animation();
  },
  
  Homepage_Animation: function() {
      if( !$j.browser.msie ) {
          $j('#homepage-main-item img').hide().fadeIn(700, function(){
              $j(this).css('display', 'block');
  
              $j('#homepage-boxes .boxes').each(function(i) {
                  $j(this).delay(100 * i).animate({
                      opacity: 1
                  }, 300);
              });
          });
  
      } else {
          $j('#homepage-main-item img').css('display', 'block');
          $j('#homepage-boxes .boxes').css('opacity', 1);
      }
  },
  
  }
  </code></pre>
  
  <p>Here is the JS for the Fancybox. </p>
  
  <pre><code>     &lt;script type="text/javascript" &gt;
       var $j = jQuery.noConflict();
  $j(document).ready(function(){
   $j("#start").fancybox({
   'padding' : 0
   });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML for Fancybox</p>
  
  <pre><code>    &lt;div class="hide"&gt;
      &lt;img src="/Images/skin/spacer1x1.png" onload="$j('#start').trigger('click');" /&gt;  
  &lt;a href="#welcome" id="start"&gt;&lt;/a&gt;
      &lt;img id="welcome" usemap="#Map" alt="PLEASE VIEW PAGE WITH IMAGES ON" src="/Images/start/start.png" /&gt;
      &lt;map id="Map" name="Map"&gt;
      &lt;area alt="See Message Examples" href="/artistphotos/" coords="29,431,301,465" shape="rect" /&gt;
      &lt;area alt="Enter Site" href="javascript:$j.fn.fancybox.close();" coords="436,433,567,464" shape="rect" /&gt;
      &lt;/map&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>Thanks for any help =></p>