Jquery Cycle + Jcarousel diaporama thumbs Notloaded?

Question

Je travaille sur la combinaison jquery cycle et jcarousel pour faire un diaporama. Cela fonctionne très bien dans Firefox, Chrome et Safari, mais dans IE, les vignettes ne sont pas en cours de chargement. Je suppose que cela a quelque chose à voir avec la façon dont les images sont générées dans le pager, et puis jcarousel ne traite pas cela dans IE mais je ne suis pas sûr. Je me sens comme si je suis très proche de faire fonctionner ce diaporama, mais j'ai besoin de comprendre pourquoi il échoue dans IE.

Voici le code 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> 

cycle est donc glisser le imgs dans div #-diaporama avancé et crée ensuite un téléavertisseur miniature basé sur de ces images dans ul # mycarousel. Ensuite, jcarousel utilise les éléments de la liste dans ul # mycarousel pour construire le carrousel. Fonctionne comme un charme dans FF, Chrome, Safari mais je ne peux pas comprendre comment le faire fonctionner dans IE.

Voici le code 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

Voici un lien vers ce que j'ai jusqu'à présent. Demo

Toute aide sur ce point serait grandement appréciée!

Answer 1

Un utilisateur sur les forums de jquery fait que j'avais un supplément, je devais changer visbile: 5, à visible: 5

Il a très bien fonctionné et maintenant le diaporama fonctionne dans IE. J'ai testé IE 6 à IE 8. Il a tendance à mieux fonctionner dans IE si vous mais le code JS dans le tag tête plutôt qu'à la fin de la page. Je pensais que je partagerais cela au cas où quelqu'un d'autre voudrait l'utiliser.