Problema jQuery IE7 (utilizando el complemento jQuery Cycle)

Question

No consigo que jQuery funcione en absoluto con IE7. Estoy usando el complemento jQuery Cycle, pero creo que este problema es con jQuery (y el hecho de que soy un novato). Estoy tratando de usar un rotador de pancartas, que funciona en Firefox, Safari e IE8. En IE7, ni siquiera se está activando ... solo muestra cada div uno tras otro.

¡Gracias de antemano!

Ejemplo 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

Retire la última coma en los atributos del ciclo. IE no come eso:

$(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 
    });