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 फ़ाइल के भीतर स्थित है के साथ दिखाया गया है:

#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(); }); लेकिन यह काम नहीं किया।

तो मैं वास्तव में किसी भी विचार की सराहना करता हूं! धन्यवाद!

अद्यतन:

एचटीएमएल बहुत ही सरल (सबसे 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 प्रकट होता है लेकिन फिर छवियां कठोर रूप से दिखाई देती हैं (बिना फीडइन() के मुझे पसंद है)। तो मूल रूप से, सबकुछ काम करता है, लेकिन शो शुरू होने के लिए तैयार होने के बाद मैं इन छवियों को फीका करना चाहूंगा। फिर, उन्हें बस अपने यादृच्छिक संक्रमण के साथ स्लाइड करना चाहिए (जैसा कि वे अब करते हैं)।

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> 

अब सीएसएस के साथ preloader 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

मैं एक वर्डप्रेस कार्यान्वित समाधान के लिए निम्नलिखित का उपयोग करें:।

स्लाइडर के नीचे, लोडिंग 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>