Problem jQuery IE7 (za pomocą wtyczki jQuery Cycle)

Question

Nie mogę w ogóle uruchomić jQuery z IE7. Używam wtyczki jQuery Cycle, ale wierzę, że ten problem dotyczy jQuery (i faktu, że jestem nowicjuszem). Próbuję użyć rotatora banerów, który działa w przeglądarkach Firefox, Safari i IE8. Na IE7 nie aktywuje się ... pokazuje po prostu każdy div jeden po drugim.

Z góry dziękuję!

Przykład http://testing.observerpapers.com/lv

JS

$(document).ready(function() { 
    $('#myslides') 
    .before('<div id="nav">') 
    .cycle({ 
     fx: 'fade', // choose your transition type 
     speedIn: 600, 
     speedOut: 600, 
     timeout: 8000, 
     pause: 0, // so that pauses when user hovers over a slide 
     pager: '#nav', // instructs the plugin to create navigation elements 
    }); // every child element of the container becomes a slide  

    /*ddsmoothmenu.init({ 
     mainmenuid: "smoothmenu1", //menu DIV id 
     orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v" 
     classname: 'ddsmoothmenu', //class added to menu's outer DIV 
     //customtheme: ["#1c5a80", "#18374a"], 
     contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"] 
    });*/ 
}); 

CSS

#myslides { 
    width: 980px; 
    height: 360px; 
    /*overflow: hidden;*/ 
    z-index: 500; 
    background:none !important; 
} 
#myslides div { 
    /*background:none !important;*/ 
} 
#myslides .textBlock { 
    background: url(../images/home/bg-bb-textblocks.png) top left repeat; 
    width: 360px; 
    padding: 4px; 
    margin-top: 42px; 
    margin-left: 33px; 
} 
#myslides .textBlock div { 
    padding: 17px 8px 10px 18px; 
    border: 1px solid #756e67; 
} 
#myslides h1 { 
    font: normal 24px/1.2 Helvetica, Arial, sans-serif; 
    text-transform: uppercase; 
    color: #fff; 
    margin-bottom: 5px; 
} 
#myslides p { 
    font: normal 14px/1.3 Helvetica, Arial, sans-serif; 
    color: #fff; 
} 
#myslides cite { 
    display: block; 
    width: 500px; 
    font-style: normal; 
    text-transform: uppercase; 
    color: #fff; 
    font-size: 12px; 
    position: absolute; 
    bottom: 6px; 
    left: 20px; 
    z-index: 5000; 
} 
#myslides > div { 
    width: 980px; 
    height: 386px; 
} 
#myslides .billBoard1 { 
    background: url(../images/home/bb-kingston.jpg) top left repeat; 
} 
#myslides .billBoard2 { 
    background: url(../images/home/bb-harbor-breeze.jpg) top left repeat; 
} 
#myslides .billBoard3 { 
    background: url(../images/home/bb-mondrian.jpg) top left repeat; 
} 
.slides { 
    margin-left: 385px; 
    width: 539px; 
} 
.navBG { 
    position: absolute; 
    display: block; 
    z-index: 500; 
    bottom: 0; 
    width: 980px; 
    height: 30px; 
    background: url(../images/home/bg-bb-textblocks.png) top left repeat; 
} 
#nav { 
    position: absolute; 
    z-index: 501; 
    top: 356px; 
    right: 10px; 
    height: 30px; 
    text-align: right; 
} 
#nav a:hover, #nav a.activeSlide { 
    background:none repeat scroll 0 0; 
    font-weight: bold; 
    color: #fff; 
} 
#nav a { 
    background:url("") repeat-x scroll 0 0; 
    color: #d6d2cf; 
    display: inline-block; 
    font: 12px/18px Helvetica, Arial, san-serif; 
    height: 18px; 
    margin: 4px 0 0 5px; 
    padding: 2px 8px; 
    text-align: center; 
    text-decoration: none; 
} 
#nav { 
    font-size: 23px; 
} 

Answer 1

usunąć ostatni przecinek atrybutów cyklu. IE tego nie zjada:

$(document).ready(function() { 
    $('#myslides') 
    .before('<div id="nav">') 
    .cycle({ 
     fx: 'fade', // choose your transition type 
     speedIn: 600, 
     speedOut: 600, 
     timeout: 8000, 
     pause: 0, // so that pauses when user hovers over a slide 
     pager: '#nav' //HERE I REMOVED THE COMMA 
    });