Fai Nivo Slider fade-in del carico

Question

Ehi, voglio caricare il Nivo Slider in questo ordine:

1. Prima compaiono le diapositive, un loading.gif viene mostrato.
2. Una volta che le diapositive sono pronte per apparire, si dissolvono.

funzione di chiamata di Il Nivo Slider si presenta così:

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

});

Il loading.gif viene mostrata con questa affermazione CSS che si trova all'interno del file nivo-slider.css:

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

ho pensato che il modo per farlo era quello di utilizzare il built-in di parametri post-carico, così: afterLoad(function() { $(this).fadeIn(); }); ma non ha funzionato.

Quindi mi piacerebbe davvero qualche idea! Grazie!

UPDATE:

L'HTML è molto semplice (come layout più del cursore Nivo):

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

Quando uso il parametro succede nulla post-carico; appare il caricamento.gif, ma poi le immagini vengono visualizzate duramente (senza il fadeIn() mi piacerebbe). Quindi, in pratica, tutto funziona, ma mi piacerebbe che queste immagini scomparissero una volta che lo show fosse pronto per iniziare. Quindi, dovrebbero semplicemente scorrere con le loro transizioni casuali (come fanno ora).

Answer 1

Quello che farei è sovrapporre il cursore con il caricatore e utilizzare la funzione afterLoad di nivo per eseguire l'animazione desiderata sulle immagini contenute, non sul supporto slider. Ecco come lo farei:

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

Ora con il CSS potrai sovrapporre la preloader sopra il cursore utilizzando posizione assoluta in relazione alla posizione relativa del 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; 
} 

Poi, il cursore nivo avrà tutte le chiamate appropriate, quindi il afterLoad conterrà l'animazione dissolvenza sulle immagini all'interno del dispositivo di scorrimento:

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

Se si desidera un cr oss-dissolvenza, invece, allora il vostro afterLoad può guardare semplicemente piace:

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

questo modo si eviteranno eventuali problemi che hai avuto con le immagini che saltano

Answer 2

Io uso la seguente per wordpress implementato la soluzione:.

sotto la barra di scorrimento, aggiungere il carico 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 

E poi nell'intestazione.php, prima di aggiungere questo:

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