Make Nivo Slider fade-in on load

Question

Hey, I want to load the Nivo Slider in this order:

1. Before the slides appear, a loading.gif is shown.
2. Once the slides are ready to appear, they fadeIn.

The Nivo Slider's call function looks like this:

$(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 & 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 & 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
});

});

The loading.gif is shown with this CSS statement that is located within the nivo-slider.css file:

#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;
}

I thought the way to do this was to use the built-in afterLoad parameter, like this: afterLoad(function() { $(this).fadeIn(); }); but that didn't work out.

So I'd really appreciate any ideas! Thank you!

UPDATE:

The HTML is very simple (as most Nivo slider's layouts):

<div id="slider" class="box"> <!-- Image/video top box (cinema) -->
            <img src="assets/images/cinema/slide1.jpg" />
            <img src="assets/images/cinema/slide2.jpg" />
            <img src="assets/images/cinema/slide3.jpg" />
            <img src="assets/images/cinema/slide4.jpg" />
        </div>

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).

Answer 1

I use the following for a wordpress implemented solution:

Underneath the slider, add the loading gif

<div id="slider_container">
<div id="slider">
<?php
$captions = array();
$tmp = $wp_query;
$wp_query = new WP_Query('post_type=featured&orderby=menu_order&order=ASC');
if($wp_query->have_posts()) : while($wp_query->have_posts()) : $wp_query->the_post();
$rlink = get_post_meta($post->ID,'rlink',true);?>

<?php if($rlink !=''){?>            
<a href="<?php echo $rlink;?>">
<?php }?> 
<img class="slideimg" src="<?php echo get_template_directory_uri(); ?>/timthumb.php?src=<?php echo get_image_path(get_post_meta($post->ID, 'slideimage_src', true)); ?>&amp;h=450&amp;w=900&amp;zc=1" alt="<?php echo get_post_meta($post->ID, 'rmcaption', true); ?>" title="<?php echo get_post_meta($post->ID, 'rmcaption', true); ?>" />
        <?php if($rlink !=''){?>            
        </a>
        <?php }?>
        <?php echo $image[0]; ?>
    <?php
    endwhile; wp_reset_query();
    endif;
    $wp_query = $tmp;
    ?>
</div> <!-- end slider -->


<?php // load the loading image first whilst nivo is pre-loading images ?>
 <div class="loading"><img src="<?php bloginfo('url'); ?>/images/assets/ajax-loader.gif" /> </div>   


</div>
<!-- end #slider_container -->


<!-- nivo slider & slider settings -->
    <script type="text/javascript">
    $j = jQuery.noConflict();
        $j(window).load(function() {
            $j('#slider').nivoSlider({

// all your settings

And then in your header.php, just before add this:

<script type="text/javascript">


$j = jQuery.noConflict();
        $j(document).ready(function() {
            $j('#slider.nivoSlider').hide();    
            $j('.loading').show();

        // then when the #content div has loaded
        $j(window).bind('load', function() {
            $j('#slider.nivoSlider').show();
            $j('.loading').hide();
            $j('#slider.nivoSlider').fadeIn('slow');
});
});
</script>

Answer 2

What I'd do is overlay the slider with the loader and use nivo's afterLoad function to do the animation you want on the contained images, not the slider holder. Here's how I'd do it:

<div id="wrapper">
    <div id="slider" class="box">
        <img src="assets/images/cinema/slide1.jpg" />
        <img src="assets/images/cinema/slide2.jpg" />
        <img src="assets/images/cinema/slide3.jpg" />
        <img src="assets/images/cinema/slide4.jpg" />
    </div>
    <div id="preloader">
        <img src="assets/images/nivo-loader.gif" />
    </div>
</div>

Now with the CSS you'll overlay the preloader over the slider using absolute position in relation to the relative position of the wrapper:

#wrapper { position:relative; }
#preloader {
 background:#eee;
 position:absolute; top:0; left:0; z-index:51; /* z-index greater than #slider */
 width:960px; height:328px;
}
#preloader img {
 padding:150px 0 0 470px; /* unknown img size, but adjust so centered */
}
#slider {
 background: #eee url(../images/nivo-loader.gif) no-repeat 50% 50%;
 position: relative; z-index:50; /* set z-index as appropriate to your site */
 width: 960px; height: 328px;
}
#slider img {
 position: absolute;
 top: 0px;
 left: 0px;
 display: none;
}

Then, the nivo slider will have all appropriate calls, then the afterLoad will contain your fade animation on the images within the slider:

$('#slider').nivoSlider({
    ...lots of properties then...
    afterLoad: function(){
        var $slider = $('#slider img');
        $slider.css('opacity',0);
        $('#preloader').fadeOut(500, function(){
           $slider.animate({'opacity':1}, 500);
        });
    }
});

If you want a cross-fade instead, then your afterLoad can look simply like:

$('#slider').nivoSlider({
    ...lots of properties then...
    afterLoad: function(){
        $('#preloader').fadeOut(500);
    }
});

This will avoid any problems you had with images popping in.