嘿,我想按此顺序加载Nivo Slider:
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(); });
但是没有用完。
所以我真的很感激任何想法! 谢谢!
更新
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())。所以基本上,一切都有效,但我只是希望这些图像在节目准备开始后淡入。然后,他们应该只是随着他们的随机过渡滑动(就像现在一样)。
答案 0 :(得分:6)
我要做的是使用加载器覆盖滑块并使用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);
}
});
这将避免您弹出图像时遇到的任何问题。
答案 1 :(得分:0)
我将以下内容用于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)); ?>&h=450&w=900&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>