Machen Nivo Slider fade-in auf zu laden

Hey, ich will zum laden der Nivo-Slider in dieser Reihenfolge:

Bevor Sie die Folien ein loading.gif dargestellt.
Einmal die Folien sind bereit zu erscheinen, Sie fadeIn.

Den Nivo Slider Aufruf der Funktion sieht wie folgt aus:

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

});

Den loading.gif gezeigt wird mit dieser CSS-Anweisung, die sich innerhalb der nivo-slider.css-Datei:

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

Dachte ich, dass der Weg, dies zu tun, war der Einsatz der integrierten nachlast parameter, wie folgt: afterLoad(function() { $(this).fadeIn(); }); aber das hat nicht funktioniert.

So, ich würde wirklich zu schätzen jede Ideen!
Danke!

UPDATE:

HTML ist sehr einfach (wie die meisten Nivo slider - layouts):

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

Wenn ich die nachlast parameter passiert nichts; die loading.gif erscheint dann aber die Bilder zeigen bis hart (ohne fadeIn() ich möchte). Also im Grunde funktioniert alles, aber ich möchte nur diese Bilder zu verblassen, sobald die Karte ist bereit zum start. Dann sollten Sie schieben Sie einfach mit Ihren zufällige übergänge (wie Sie jetzt tun).

Würde es helfen, wenn Sie könnten mehr beschreibend. Sie sagen, dass es nicht geklappt hat - warum nicht? Was hat die Seite jetzt machen??? Welche Teile funktionieren, welche Teile nicht funktionieren? Was bedeutet das HTML Aussehen? etc. 🙂
Sorry, aktualisiert den thread!

InformationsquelleAutor cr0z3r | 2011-01-18

Was ich tun würde, ist die overlay-slider mit dem loader und verwenden nivo ist afterLoad - Funktion für die animation, die Sie wollen auf die enthaltenen Bilder, nicht die slider Halter. Hier ist, wie ich es tun würde:

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

Nun mit der CSS Sie werden als overlay über den preloader über den Schieberegler anhand der absoluten position in Bezug auf die relative position der 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;
}

Dann, den nivo slider werden alle entsprechenden Anrufe, dann die afterLoad enthält Ihre fade-animation auf die Bilder im slider:

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

Wenn Sie möchten, eine cross-fade statt, dann ist Ihr afterLoad Aussehen kann einfach wie:

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

Dadurch vermeiden Sie Probleme, die Sie hatten mit Bildern knallen.

Unglaublich, ich danke Ihnen so sehr. Was für eine umfangreiche und gut erklärte Antwort, danke nochmals. Chris

InformationsquelleAutor mVChr

Verwende ich im folgenden für eine wordpress implementierte Lösung:

Unter dem Schieberegler, fügen Sie das laden von 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

Und dann in Ihre header.php kurz vor hinzufügen:

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

InformationsquelleAutor Sol

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.