がNivoスライダーがフェードイン負荷にしてください

Question

はねえ、私はこの順序でNivoスライダーをロードする：スライドが表示され

1. 前に、loading.gifが示されています。
2. スライドが表示される準備ができたら、それらはフェードインします。

Nivoスライダーのコール機能は、次のようになります

$(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がnivo-slider.cssファイル内に配置され、この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> 

私は何も起こりません後負荷パラメータを使用すると、 loading.gifが表示されますが、イメージは厳密に表示されます（fadeIn（）は必要ありません）。だから、基本的にはすべて動作しますが、ショーが始まる準備が整い次第、これらのイメージが消えてしまいます。それから、彼らは単に彼らが今やっているように彼らのランダムな移行とスライドする必要があります。

Answer 1

ローダーでスライダーをオーバーレイして、sliderホルダーではなく、含まれているイメージで必要なアニメーションを行うには、nivoのafterLoad関数を使用します。私はそれを行うだろうかここにあります：

今

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

その後、あなたはCRをしたい場合

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

：nivoスライダーは、afterLoadは、スライダ内の画像の上にあなたのフェードアニメーションが含まれています、すべての適切な呼び出しを持っていますOSS-フェード代わりに、そしてあなたのafterLoadは、単にのように見えることができます。これは、あなたがイメージが中に飛び出るとしていたすべての問題を回避します

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

Answer 2

私はwordpressの実装ソリューションについては、以下を使用します。

スライダの下にローディング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 

ヘッダーに追加してください。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>