title: Need to hide loading content
body: <p>I'm using the jQuery CameraSlider, it's working fine, but when the page loads the pagination icons flash across the top of the containing div and the client's keen to see them disappear. The code is actually doing what it has been built to do. However, I would still like to make it so that the pagination icons don't flash on load if this is possible.</p>
  
  <p><a href="http://pattonnz.businesscatalyst.com/index.htm" rel="nofollow">Here</a> is the page in question.</p>
  
  <p>I have identified the elements that need to be controlled, and I have found a script that I "think" is what I'm after, but I'm not able to get it to do exactly what I want. </p>
  
  <p>By setting this element in styles" to display:none; I get no pagination, so I know these are the elements to control.</p>
  
  <pre><code>.camera_wrap .camera_pag .camera_pag_ul li {
      background: #929497;     
  }
  </code></pre>
  
  <p>This line inside my script turns the pagination off after 5 seconds, so I know I can control it, I just can't do the reverse - appear after 5 seconds, or an acceptable time.</p>
  
  <pre><code>setTimeout(function() { $('.camera_pag_ul li').hide() }, 5000);
  </code></pre>
  
  <p>I thought something like the following might display the pagination icons after 5 seconds, but it doesn't.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
      $(document).ready(function() {
          setTimeout(function() { $('.camera_pag_ul li').show() }, 5000);
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I have also tried this approach with out success.</p>
  
  <pre><code>&lt;style&gt;.camera_pag_ul li{display:none;}&lt;/style&gt;
  
  $(window).load(function() {
    // When the page has loaded
  $("camera_pag_ul li").show(5000);
  });
  </code></pre>
  
  <p>Here're my scripts as they appear at the bottom of the page.</p>
  
  <pre><code>&lt;script src="js/jquery.js"&gt;&lt;/script&gt;
  &lt;script&gt;window.jQuery || document.write('&lt;script src="js/jquery.js"&gt;&lt;\/script&gt;')&lt;/script&gt;
      &lt;!-- Camera Slideshow --&gt;
      &lt;script type='text/javascript' src='scripts/jquery.mobile.customized.min.js'&gt;&lt;/script&gt;
      &lt;script type='text/javascript' src='js/slider/camera1920.js'&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          $(function(){
  
                  //dropdown navigation
                  $('#navigation_horiz').naviDropDown({
                          dropDownWidth: '165px'  //adjusted to longest title in dropdown = Corporate Responsibility
  
                  });
  
                  //Add bounce effect on Hover to class                    
          $('.imgHover').mouseenter(function () {
                        $(this).effect("bounce", { distance: 3, times:1 }, 900);
                  });
  
                  //camera slideshow
                  jQuery('#camera_wrap_1').camera({               
  
              thumbnails: false,  //true will make thumbnails of the image appear on hovering over pagination dots
              pagination: true
  
  
          });
  
          setTimeout(function() { $('.camera_wrap .camera_pag .camera_pag_ul li').hide() }, 5000);   //This works so why can't I get it to do the opposite??
  
          });
  &lt;/script&gt;
  </code></pre>
  
  <p>I don't mind how I do it, I just want to be able to make them disappear until the page has loaded.</p>
  
  <p>I FOUND THE SOLUTION - HERE IT IS:</p>
  
  <p>Reference the controls by their wrapper:</p>
  
  <pre><code>CSS
  .camera_pag {
    display: none;
  }
  </code></pre>
  
  <p>And then control the displaying of the elements in the script = show once page has loaded. </p>
  
  <pre><code>JS
  jQuery('#camera_wrap_1').camera({       
      /*/     /*sets the height */
      thumbnails: false,  
      pagination: true,
      onLoaded: function() {
          $(".camera_pag").show(); // or .fadeIn();
      }
  });
  </code></pre>