Jquery Cycle + Jcarousel幻燈片thumbs not loading？

Question

我正在合併jquery循環和jcarousel來製作幻燈片。它在Firefox，Chrome和Safari中運行良好，但在IE中縮略圖未加載。

我猜它與如何生成傳呼機中的圖像有關，然後jcarousel只是不會在IE中實現，但我不確定。我覺得我非常接近讓這個幻燈片工作，但我需要弄清楚爲什麼它在IE中失敗。

下面是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> 

所以循環滑動的div＃先進的幻燈片的IMGS，然後創建一個基於關在UL＃mycarousel這些圖像的縮略圖尋呼機。然後，jcarousel使用ul＃mycarousel中的列表項來構建輪播。像FF，Chrome，Safari中的魅力一樣工作，但我無法弄清楚如何讓它在IE中運行。

這裏是JS代碼：

$（文件）。就緒（函數（）{

// 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, 
}); 

}）; //結束

這是我到目前爲止的一個鏈接。 Demo

任何幫助，將不勝感激！

Answer 1

在jQuery的論壇，用戶在指出我有一個額外的， 我需要visbile改變：5，可見：5

這真是棒極了，現在幻燈片在IE工作。我通過IE 8測試了IE 6。它在IE中的工作效果更好，如果你將JS代碼放在head標籤中，而不是在頁尾。我想我會分享這個，以防其他人想要使用它。