Hãy NIVO Slider fade-in trên tải

Question

Này, tôi muốn nạp NIVO trượt theo thứ tự này:

1. Trước khi slide xuất hiện, một loading.gif được hiển thị.
2. Khi các trang trình bày đã sẵn sàng xuất hiện, chúng sẽ mờ dần.

chức năng cuộc gọi Các NIVO Slider trông như thế này:

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

});

Các loading.gif được hiển thị với tuyên bố CSS này nằm bên trong 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; 
} 

Tôi nghĩ cách để làm điều này là sử dụng được xây dựng trong tham số hậu gánh, như thế này: afterLoad(function() { $(this).fadeIn(); }); nhưng điều đó không thành công.

Vì vậy, tôi thực sự đánh giá cao bất kỳ ý tưởng nào! Cảm ơn bạn!

UPDATE:

HTML là rất đơn giản (như bố trí hầu hết NIVO trượt của):

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

Khi tôi sử dụng tham số hậu gánh có gì xảy ra; loading.gif xuất hiện nhưng sau đó các hình ảnh hiển thị gay gắt (không có fadeIn() tôi muốn). Vì vậy, về cơ bản, mọi thứ hoạt động, nhưng tôi chỉ muốn những hình ảnh này mờ dần khi chương trình đã sẵn sàng để bắt đầu. Sau đó, họ chỉ đơn giản là nên trượt với các chuyển tiếp ngẫu nhiên của họ (như họ làm bây giờ).

Answer 1

Điều tôi muốn làm là phủ thanh trượt với bộ nạp và sử dụng chức năng afterLoad của nivo để thực hiện hoạt ảnh bạn muốn trên hình ảnh được chứa, chứ không phải chủ sở hữu slider. Đây là cách tôi muốn làm điều đó:

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

Bây giờ với CSS bạn sẽ che phủ các preloader trên thanh trượt sử dụng vị trí tuyệt đối liên quan đến vị trí tương đối của 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; 
} 

Sau đó, thanh trượt NIVO sẽ có tất cả các cuộc gọi thích hợp, sau đó các afterLoad sẽ chứa hình ảnh động phai của bạn trên hình ảnh trong thanh trượt:

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

Nếu bạn muốn có một cr oss-phai thay vào đó, sau đó afterLoad của bạn có thể trông đơn giản thích:

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

Điều này sẽ tránh bất kỳ vấn đề bạn có với những hình ảnh popping trong

Answer 2

tôi sử dụng sau đây cho một wordpress thực hiện giải pháp:.

Bên dưới thanh trượt, thêm tải 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 

Và sau đó trong tiêu đề của bạn.php, ngay trước khi thêm thông tin này:

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