Сделайте Nivo Slider постепенным при загрузке - PullRequest
Новая
       4

Сделайте Nivo Slider постепенным при загрузке

6 голосов
/ 18 января 2011

Привет, я хочу загрузить 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, например: 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>

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

Ответы [ 2 ]

6 голосов
/ 18 января 2011

Я бы наложил слайдер на загрузчик и использовал функцию 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);
    }
});

Это позволит избежать проблем с отображением изображений.

0 голосов
/ 28 мая 2013

Я использую следующее для решения, реализованного в 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

А затем в вашем header.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>
...