使 Nivo Slider 在加载时淡入

Posted 2023-03-06

【中文标题】使 Nivo Slider 在加载时淡入

【英文标题】：Make Nivo Slider fade-in on load

【发布时间】：2011-06-11 07:37:00

【问题描述】：

嘿，我想按这个顺序加载 Nivo Slider：

在幻灯片出现之前，会显示一个 loading.gif。 一旦幻灯片准备好显示，它们就会淡入。

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 与位于 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 参数，如下所示：afterLoad(function() $(this).fadeIn(); ); 但没有成功。

所以我真的很感激任何想法！ 谢谢！

更新：

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() ）。所以基本上，一切正常，但我只是希望这些图像在节目准备开始后淡入淡出。然后，他们应该简单地随着他们的随机转换滑动（就像他们现在所做的那样）。

【问题讨论】：

如果您可以更具描述性会有所帮助。你说它没有成功——为什么不呢？页面现在做什么？哪些部分有效，哪些部分无效？ HTML 是什么样的？等:)

【参考方案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>

现在使用 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);
    
);

这将避免您在弹出图像时遇到的任何问题。

【讨论】：

太棒了，非常感谢。多么广泛且解释清楚的答案，再次感谢您。克里斯

【参考方案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"  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>