title: Make Nivo Slider fade-in on load
body: <p>Hey, I want to load the Nivo Slider in this order:</p>
  
  <ol>
  <li>Before the slides appear, a loading.gif is shown.</li>
  <li>Once the slides are ready to appear, they fadeIn.</li>
  </ol>
  
  <p>The Nivo Slider's call function looks like this:</p>
  
  <pre><code>$(window).load(function() { /* ///// start WINDOW load ///// */
  $('#slider').nivoSlider({
      effect:'random', //Specify sets like: 'fold,fade,sliceDown'
      slices:12,
      animSpeed:500, //Slide transition speed
      pauseTime:3000,
      startSlide:0, //Set starting Slide (0 index)
      directionNav:false, //Next &amp; Prev
      directionNavHide:true, //Only show on hover
      controlNav:false, //1,2,3...
      controlNavThumbs:false, //Use thumbnails for Control Nav
      controlNavThumbsFromRel:false, //Use image rel for thumbs
      controlNavThumbsSearch: '.jpg', //Replace this with...
      controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
      keyboardNav:true, //Use left &amp; right arrows
      pauseOnHover:true, //Stop animation while hovering
      manualAdvance:false, //Force manual transitions
      captionOpacity:0.8, //Universal caption opacity
      beforeChange: function(){},
      afterChange: function(){},
      slideshowEnd: function(){}, //Triggers after all slides have been shown
      lastSlide: function(){}, //Triggers when last slide is shown
      afterLoad: function(){} //Triggers when slider has loaded
  });
  </code></pre>
  
  <p>});</p>
  
  <p>The loading.gif is shown with this CSS statement that is located within the nivo-slider.css file:</p>
  
  <pre><code>#slider {
   background: #eee url(../images/nivo-loader.gif) no-repeat 50% 50%;
   position: relative;
   width: 960px; height: 328px;
  }
  #slider img {
   position: absolute;
   top: 0px;
   left: 0px;
   display: none;
  }
  </code></pre>
  
  <p>I thought the way to do this was to use the built-in afterLoad parameter, like this: <code>afterLoad(function() { $(this).fadeIn(); });</code> but that didn't work out.</p>
  
  <p>So I'd really appreciate any ideas!
  Thank you!</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>The HTML is very simple (as most Nivo slider's layouts):</p>
  
  <pre><code>&lt;div id="slider" class="box"&gt; &lt;!-- Image/video top box (cinema) --&gt;
              &lt;img src="assets/images/cinema/slide1.jpg" /&gt;
              &lt;img src="assets/images/cinema/slide2.jpg" /&gt;
              &lt;img src="assets/images/cinema/slide3.jpg" /&gt;
              &lt;img src="assets/images/cinema/slide4.jpg" /&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>When I use the afterLoad parameter nothing happens; the loading.gif appears but then the images show up harshly (without the fadeIn() I'd like). So basically, everything works, but I'd just like these images to fade in once the show is ready to start. Then, they should simply slide with their random transitions (as they do now).</p>