pulgares jQuery Cycle + jCarousel diapositivas no se carga?

Question

Estoy trabajando en la combinación de ciclo de jQuery y jCarousel para hacer una presentación de diapositivas. Funciona muy bien en Firefox, Chrome y Safari, pero en IE las miniaturas no son de carga.

supongo que tiene algo que ver con cómo se generan las imágenes en el localizador y luego simplemente jCarousel Proccessing No es eso en IE pero no estoy seguro. Me siento como si estuviera muy cerca de conseguir esta presentación de diapositivas para el trabajo, pero tengo que averiguar por qué está fallando en el IE.

Este es el código HTML:

<!-- PHOTO SLIDESHOW CONTROLS -->                   
    <div id="photo-slideshow-controls">

        <a id="prev-btn" href="#">Prev</a> 
        <a id="next-btn" href="#">Next</a>
        <a id="play" href="#">Play</a> 
        <a id="pause" href="#">Pause</a>

        <div class="clear"></div>

    </div><!--/PHOTO SLIDESHOW CONTROLS -->


    <!-- PHOTO SLIDESHOW -->
    <div id="advanced-slideshow">
        <img src="assets/bridge-towers.jpg" width="593" height="474" alt="Bridge Towers" name="John Doe" />
        <img src="assets/dixie-lan-bbq.jpg" width="632" height="474" alt="BBQ" name="Jane Doe l Associated Press" />
        <img src="assets/downtown-overlook.jpg" width="632" height="421" alt="Overlooking Downtown Kansas City" name="Joel Johns l GardnerEDGE" />
        <img src="assets/downtown-skyline.jpg" width="474" height="219" alt="Downtown Kansas City Skyline" name="Brett Jankord" />
        <img src="assets/liberty-tower.jpg" width="356" height="474" alt="Liberty Tower" name="Steve Hengeli" />
        <img src="assets/plaza-fountain.jpg" width="632" height="468" alt="Plaza Fountain" name="Kevin Wright l GardnerEDGE" />
        <img src="assets/sprint-center.jpg" width="632" height="371" alt="Sprint Center" name="John Doe" />
        <img src="assets/union-station.jpg" width="632" height="416" alt="Union Station at night" name="Jane Doe" />
        <img src="assets/western-auto.jpg" width="632" height="474" alt="Western Auto" name="Kevin Wright l GardnerEDGE" />
        <img src="assets/bridge-towers.jpg" width="593" height="474" alt="Bridge Towers" name="John Doe" />
        <img src="assets/dixie-lan-bbq.jpg" width="632" height="474" alt="BBQ" name="Jane Doe l Associated Press" />
        <img src="assets/downtown-overlook.jpg" width="632" height="421" alt="Overlooking Downtown Kansas City" name="Joel Johns l GardnerEDGE" />
        <img src="assets/downtown-skyline.jpg" width="474" height="219" alt="Downtown Kansas City Skyline" name="Brett Jankord" />
    </div><!--/PHOTO SLIDESHOW -->


    <div id="photo-credit"></div>


    <ul id="mycarousel" class="jcarousel-skin-tango">
    </ul>

    <div class="clear"></div>


    <div id="slideshow-caption"></div> 

Así ciclo se está deslizando los IMGs en div # avanzó-presentación de diapositivas y luego crea un localizador miniatura con sede fuera de esas imágenes en # mycarousel ul. Entonces jCarousel utiliza los elementos de la lista en # mycarousel ul para construir el carrusel. Funciona como un encanto en FF, Chrome, Safari, pero no puedo encontrar la manera de conseguir que funcione en IE.

Este es el código JS:

$ (document) ready (function () {

// Adds ability to link to specifics slides    
var index = 0, hash = window.location.hash;
if (hash) {
    index = /\d+/.exec(hash)[0];
    index = (parseInt(index) || 1) - 1; // slides are zero-based
}

// Setup for Cycle Plugin
$('#advanced-slideshow').cycle({ 
prev:   '#prev-btn', 
next:   '#next-btn', 
timeout: 0, 
before: onBefore,
startingSlide: index,
pager:  '#mycarousel', 
    // callback fn that creates a thumbnail to use as pager anchor 
    pagerAnchorBuilder: function(idx, slide) { 
        return '<li><a href="#"><img src="' + slide.src + '" width="75" height="75" /></a></li>'; 
    } 
}); 



//Pauses slideshow
$('#pause').click(function() { $('#photo-slideshow').cycle('pause'); return false; });

//Instantly resumes slidesshow
$('#play').click(function() { $('#photo-slideshow').cycle('resume', true); });


/* Delayed resumes slideshow
$('#play').click(function() { $('#photo-slideshow').cycle('resume'); return false; });
*/




function onBefore(curr,next,opts) {


    // Centers the image
    var $slide = $(next);
    var w = $slide.outerWidth();
    var h = $slide.outerHeight();
    $slide.css({
        marginTop: (476 - h) / 2,
        marginLeft: (634 - w) / 2
    });


    // Centers the DIV vertically!!!!   
    var divHeight = 476;
    var theImageHeight = $slide.outerHeight();
    var newTopMargin = (divHeight - theImageHeight) / 2;
    if(theImageHeight > 476){
        $('#advanced-slideshow').css({
            marginTop: newTopMargin
        });
    }


    // Adds caption and credit line
    $('#photo-credit').html('<p>' + "Photo By: "  + this.name + '</p>') 

    $('#slideshow-caption').html(this.alt); 


    // Adds ability to link to certain slides
    {window.location.hash = opts.currSlide + 1;}


};


//jCarousel 
$('#mycarousel').jcarousel({
    scroll: 5,
    visible: 5,
});

}); // END

Aquí hay un enlace a lo que tengo hasta ahora. demostración

Cualquier ayuda en esto sería muy apreciada!

Answer 1

Un usuario más en los foros jquery señalado que tenía un extra, Necesitaba cambiar visbile: 5, a la vista: 5

Se trabajó mucho y ahora la presentación de diapositivas funciona en IE. Probé IE 6 a través de IE 8. Se tiende a funcionar mejor en IE pero si el código JS en la etiqueta de la cabeza en lugar de al final de la página. Yo pensé en compartir esto en caso de cualquier otra persona es querer usar esto.