Nivo Slider не работает с IE7

Я просмотрел довольно много сообщений на этом сайте, касающихся этой проблемы с Nivo Slider. Я проверил свои запятые в javascript, и мне это кажется правильным:

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

Вот html, на который он ссылается. Путь к папке кажется правильным (в конце концов, он работает в других браузерах!):

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

и, наконец, вот ссылка на javascript:

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

Я потратил полдня, пытаясь решить эту проблему! Надеюсь, этот могущественный список поможет определить проблему!

Думал, что добавлю и css на случай, если это может быть как-то виновато:

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

person art_wired    schedule 05.04.2011    source источник
comment
У меня никогда не было проблем с его работой в IE7 (а плагин поддерживает IE7). Вы получаете сообщение об ошибке, и если да, то что оно говорит? Или он просто молча терпит неудачу?   -  person RandomWebGuy    schedule 06.04.2011
comment
Все, что я вижу, это загрузка gif... навсегда   -  person art_wired    schedule 06.04.2011
comment
Я предполагаю, что /CoVPrototype находится в вашем корневом каталоге?   -  person RandomWebGuy    schedule 06.04.2011
comment
да, /CoVPrototype — это мой корневой каталог :) Он отлично работает в FF.   -  person art_wired    schedule 06.04.2011
comment
Будет ли иметь значение тот факт, что я тестирую на локальном хосте... как вы думаете?   -  person art_wired    schedule 06.04.2011
comment
Мне кажется, это не JS, я поменял ваш на свой, и он все еще работал.   -  person RandomWebGuy    schedule 06.04.2011
comment
Только что добавил CSS... на всякий случай :S   -  person art_wired    schedule 06.04.2011
comment
ОК, не знаю почему, но если я сначала загружаюсь из WAMP, ползунок загружается навсегда, но если я ввожу index.html после корневой папки, я вижу изменения в файле... хмммммм   -  person art_wired    schedule 06.04.2011
comment
Теперь отображается ползунок Nivo (он начал работать после того, как я вставил некоторый скрипт swfobject для другого элемента flash), но когда он перемещается, я вижу свое фоновое изображение до того, как предполагаемое изображение исчезает ... тьфу. Начну новую тему в надежде найти решение. :(   -  person art_wired    schedule 06.04.2011


Ответы (2)


У меня была такая же проблема с NivoSlider и IE7, оказалось, что это проблема с атрибутом «pauseTime».

Переместите его в конец функции jQuery и удалите запятую. После этого ползунок отлично работал в IE7.

Оригинал:

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

Отредактировано

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

См. форумы поддержки для Dev7Studios, чтобы узнать больше.

person Tyce Clee    schedule 06.02.2012
comment
У меня не сработало, помогите мне - person Shimmy Weitzhandler; 05.03.2013

Я нашел в основном то, что нашел Tyce Clee - просто убедитесь, что в конце последнего параметра нет запятой. Я просто почувствовал необходимость опубликовать, потому что это относится к любому параметру, а не только к времени паузы.

person Chuck Dries    schedule 21.01.2013