Nivo Slider not working with IE7

Question

I have reviewed quite a few posts on this site concerning this issue with Nivo Slider. I have checked my commas in the the javascript and it looks right to me:

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

Here is the html it is referencing. The folder path seems to be correct (afterall, it's working in other browsers!):

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

and finally, here is the link to the javascript:

<script src="/CoVPrototype/js/jquery.nivo.slider.pack.js" type="text/javascript"></script>

I have wasted half a day trying to get this issue resolved! Hopefully this mighty list can spot the problem!!

Thought I would add the css too in case this could be the culprit somehow:

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

Waldo

I've never had issues with it working in IE7 (and the plugin does support IE7), Are you receiving an error and if so what does it say? Or is it just failing silently? – Germanium

All I am seeing is loading gif... forever and ever – Waldo

I assume /CoVPrototype is in your root directory? – Germanium

yes /CoVPrototype is my root directory :) It works perfectly in FF. – Waldo

Would the fact that I'm testing on a localhost make a difference... do you think? – Waldo

It doesn't appear to me to be the JS, I swapped in yours for mine and it still worked. – Germanium

Just added the CSS too... just in case :S – Waldo

OK, not sure why, but if I load initially from WAMP, the slider loads forever but if I type in index.html after the root folder I see changes to the file... hmmmmmmm – Waldo

Nivo slider is now displaying (It started working after I inserted some swfobject script for a different flash element) but when it transitions, I can see my background image before the intended image fades in... ugh. I'll start another thread in hopes of finding a solution. :( – Waldo

Answer 1

I had the same issue with NivoSlider and IE7, turns out it was an issue with the "pauseTime" attribute.

Move it to the end of your jQuery function and remove the comma. After doing this the slider worked fine in IE7.

Original:

pauseTime: 4500, // How long each slide will show
pauseOnHover: true, // Stop animation while hovering

Edited

pauseOnHover: true, // Stop animation while hovering
pauseTime: 4500 // How long each slide will show

See the support forums for Dev7Studios to read more.

Opaque

Didn't work for me, please help me – Moritz

Answer 2

I have found basically what Tyce Clee found - just make sure there is no comma at the end of the last parameter. I just felt the need to post because that applies to any parameter, not just pause time.

Picklock