Сделать Nivo Slider плавным на нагрузке

Question

Эй, я хочу, чтобы загрузить Nivo Slider в следующем порядке:

1. Перед появляются горки, loading.gif показан.
2. Как только слайды готовы к появлению, они исчезают.

вызов функции В Nivo Slider выглядит следующим образом:

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

});

loading.gif показан с этим CSS заявлением, что находится в файле 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; 
} 

Я думал, что способ сделать это, чтобы использовать встроенный в параметре постнагрузки, такой: afterLoad(function() { $(this).fadeIn(); }); но это не сработал.

Так что я действительно ценю любые идеи! Спасибо!

UPDATE:

HTML-очень просто (как макеты самых 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> 

Когда я не использовать ничего параметра постнагрузки происходит; появляется load.gif, но затем изображения отображаются жестко (без fadeIn(), которые мне бы хотелось). Таким образом, в принципе, все работает, но мне бы хотелось, чтобы эти изображения исчезли, как только шоу будет готово к запуску. Затем они должны просто скользить со своими случайными переходами (как они это делают сейчас).

Answer 1

Что бы я сделал, это наложить ползунок с помощью загрузчика и использовать функцию nivo afterLoad, чтобы сделать анимацию, которую вы хотите, на содержащиеся изображения, а не держатель slider. Вот как я это сделать:

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

Теперь с помощью CSS вы наложение прелоудера над ползунком, используя абсолютную позицию по отношению к относительному положению 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; 
} 

Тогда, слайдер Nivo будет иметь все соответствующие вызовы, то afterLoad будет содержать выцветание анимации на изображении внутри слайдера:

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

Если вы хотите кр ОСС-увядает вместо этого, то ваш afterLoad может выглядеть просто нравится:

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

Это позволит избежать каких-либо проблем у вас с изображением появляется в

Answer 2

Я использую следующий для WordPress реализованы решений:.

Под ползунком добавьте загрузочный гид

<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 

А затем в вашем заголовке.php, перед тем как добавить это:

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