Возникла странная проблема с jQuery Cycle Plugin Pager и IE7 и 8.

Я создаю сайт с помощью плагина Cycle и использую миниатюры изображений в качестве пейджеров. Он отлично работает в Firefox, Chrome и IE9. В IE8 и 7 у меня действительно странная проблема.

Первое изображение пейджера и слайд-шоу загружаются нормально. Когда я нажимаю на вторую миниатюру, чтобы загрузить второе изображение, слайд-шоу становится белым (кажется, что оно не загружает изображение или пытается загрузить изображение, которое не может найти, не совсем уверен), когда я нажимаю третью миниатюру загружает второе изображение в слайд-шоу. Этот шаблон не загрузки изображения, а затем загрузки неправильного изображения продолжается на протяжении всего слайд-шоу.

Вот реальный jQuery:

$(document).ready(function() {
    $('#gallery').cycle({
        fx: 'scrollHorz',
        speed: 500,
        timeout: 0,
        pager: '#slide_navigation',
        pagerAnchorBuilder: function(idx, slide) {
            return '#slide_navigation li:eq(' + idx + ') a';
        }
    });
    $("#left").click(function() {
        $("#slide_navigation").animate({"marginLeft": "+=960px"}, "slow");
        $("#left").hide();
        $("#right").show();
    });
    $("#right").click(function() {
        $("#slide_navigation").animate({"marginLeft": "-=960px"}, "slow");
        $("#right").hide();
        $("#left").show();
    });

Вот CSS для страницы:

#slide_navigation {
    width: 2000px;
    padding: 10px 0;
    border:  1px #909090;
    border-style: solid none;
}
#slide_navigation li {
    list-style: none;
    display: inline;
    margin: 5px;
    padding: 52px 3px 0px 3px;
}
#slide_navigation li:first-child {
    margin-left: 25px;
}
#slide_navigation li.activeSlide {
    background: #F68009;
}
#left {
    width: 20px;
    height: 75px;
    float: left;
    background: #FFFFFF url(prev1.png) no-repeat center;
    position: relative;
    top: -85px;
    left: -3px;
    margin-bottom: -85px;
    display: none;
}
#right {
    width: 20px;
    height: 75px;
    float: right;
    background: #FFFFFF url(next1.png) no-repeat center;
    position: relative;
    top: -85px;
    right: -3px;
    margin-bottom: -85px;
}

И на всякий случай - HTML для пейджера:

<div id="slide_navigation">
    <li><a href="#"><img src=support-1.jpg></a></li>
    <li><a href="#"><img src=support-2.jpg></a></li>
    <li><a href="#"><img src=support-3.jpg></a></li>
    <li><a href="#"><img src=support-4.jpg></a></li>
    <li><a href="#"><img src=support-5.jpg></a></li>
    <li><a href="#"><img src=support-6.jpg></a></li>
    <li><a href="#"><img src=support-7.jpg></a></li>
    <li><a href="#"><img src=support-8.jpg></a></li>
    <li><a href="#"><img src=support-9.jpg></a></li>
    <li><a href="#"><img src=support-10.jpg></a></li>
    <li><a href="#"><img src=support-11.jpg></a></li>
    <li><a href="#"><img src=support-12.jpg></a></li>
    <li><a href="#"><img src=support-13.jpg></a></li>
    <li><a href="#"><img src=support-14.jpg></a></li>
    <li><a href="#"><img src=support-15.jpg></a></li>
    <li><a href="#"><img src=support-16.jpg></a></li>
</div>
<div id="left" class="cursorPointer"></div>
<div id="right" class="cursorPointer"></div>

Левый и правый идентификаторы используются для облегчения навигации по ползунку. Не думаю, что это связано, но предоставляю как можно больше информации. Любая помощь будет принята с благодарностью.

Спасибо!


internet-explorer jquery-plugins jquery-cycle
person Howie_23    schedule 01.05.2012    source источник
comment
Можете ли вы настроить для нас рабочий пример на jsbin.com?   -  person Sampson    schedule 01.05.2012
comment
Никогда раньше ничего не делал в jsbin, но думаю, у меня все получилось. jsbin.com/ukizac   -  person Howie_23    schedule 01.05.2012
comment
Это отличный инструмент для получения еще более быстрых ответов. Я предоставил решение ниже.   -  person Sampson    schedule 02.05.2012

Ответы (1)


arrow_upward
0
arrow_downward

У вас были некоторые несоответствующие окончания тегов. Обратите внимание, что закрывающий </a> не имеет соответствующего открывающего тега <a>. Укажите открывающий тег, и он работает нормально.

<div id="gallery">
    <img src=http://www.howie23.org/rp-help/1.jpg></a>
    <img src=http://www.howie23.org/rp-help/2.jpg></a>
    <img src=http://www.howie23.org/rp-help/3.jpg></a>
    <img src=http://www.howie23.org/rp-help/4.jpg></a>
    <img src=http://www.howie23.org/rp-help/5.jpg></a>
    <img src=http://www.howie23.org/rp-help/6.jpg></a>
    <img src=http://www.howie23.org/rp-help/7.jpg></a>
    <img src=http://www.howie23.org/rp-help/8.jpg></a>
</div>

Исправленная демонстрация: http://jsbin.com/ukizac/3/edit#preview

person Sampson    schedule 01.05.2012
comment
Вот оно! Не могу поверить, что я пропустил это. Спасибо, что указали мне на очевидное. Высоко ценится :D - person Howie_23; 02.05.2012