Nivo Slider no funciona con IE7
He revisado algunas publicaciones en este sitio sobre este problema con Nivo Slider. He comprobado mis comas en el javascript y me parece correcto:
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:'fade',
slices:15,
animSpeed:500,
pauseTime:4000,
startSlide:0,
directionNav:false,
directionNavHide:false,
controlNav:true,
controlNavThumbs:false,
controlNavThumbsFromRel:false,
controlNavThumbsSearch: '.jpg',
controlNavThumbsReplace: '_thumb.jpg',
keyboardNav:true,
pauseOnHover:true,
manualAdvance:false,
captionOpacity:0.9,
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){},
lastSlide: function(){},
afterLoad: function(){}
});
});
</script>
Aquí está el html al que hace referencia. La ruta de la carpeta parece ser correcta (después de todo, ¡está funcionando en otros navegadores!):
<div id="slider_wrapper">
<div id="slider">
<img src="/CoVPrototype/images/nivoslider/_img1.jpg" alt="" title="Discover City Parks" />
<img src="/CoVPrototype/images/nivoslider/_img2.jpg" alt="" title="Enjoy Our Beautiful City" />
<img src="/CoVPrototype/images/nivoslider/_img3.jpg" alt="" title="This is an example of a caption" />
<img src="/CoVPrototype/images/nivoslider/_img4.jpg" alt="" title="This is Our Home" />
<img src="/CoVPrototype/images/nivoslider/_img5.jpg" alt="" title="Mild Tempuratures and Natural Beauty" />
</div>
</div>
y finalmente, aquí está el enlace al javascript:
<script src="/CoVPrototype/js/jquery.nivo.slider.pack.js" type="text/javascript"></script>
He perdido medio día tratando de resolver este problema! ¡Ojalá esta poderosa lista pueda detectar el problema!
Pensé que también agregaría el CSS en caso de que este pudiera ser el culpable de alguna manera:
#slider_wrapper {
margin:0 auto;
width:740px;
height:360px;
}
#slider {
width:738px; /* Change this to your images width */
height:360px; /* Change this to your images height */
background:url(/CoVPrototype/images/nivoslider/loading.gif) no-repeat 50% 50%;
overflow:hidden;
margin-top:25px;
left:-96px;
/*--Top right rounded corner--*/
-moz-border-radius-topright: 5px;
-khtml-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
/*--Top left rounded corner--*/
-moz-border-radius-topleft: 5px;
-khtml-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
/*--Bottom right rounded corner--*/
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
/*--Bottom left rounded corner--*/
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:60;
display:block;
}
/* The slices in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;
/*--Top right rounded corner--*/
-moz-border-radius-topright: 5px;
-khtml-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
/*--Top left rounded corner--*/
-moz-border-radius-topleft: 5px;
-khtml-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
/*--Bottom right rounded corner--*/
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
/*--Bottom left rounded corner--*/
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#F1F0EB;
color:#5D79A1;
filter: alpha(opacity=90);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
/* Overridden by captionOpacity setting */
width:100%;
z-index:89;
height:32px;
/*--Bottom right rounded corner--*/
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
/*--Bottom left rounded corner--*/
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
.nivo-caption p {
padding:8px 5px 5px 11px;
margin:0;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:1.1em;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}