JQuery Cycle + jCarousel عرض عرض شرائح لا يتم تحميلها؟

Question

أنا أعمل على الجمع بين دورة JQuery و JCarousel لصنع عرض شرائح. إنه يعمل بشكل رائع في Firefox و Chrome و Safari ، ولكن في مثل الصور المصغرة لا يتم تحميلها.

أظن أنه له علاقة بكيفية إنشاء الصور الموجودة في النداء ، ثم 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> 

لذا فإن Cycle تنزلق IMGs في عرض Div#Advanced-Slideshow ومن ثم ينشئ جهاز Pager Thumbnail على أساس تلك الصور في Ul#mycarousel. ثم يستخدم JCarousel عناصر القائمة في Ul#mycarousel لبناء carousel. يعمل مثل السحر في FF ، Chrome ، Safari ، لكن لا يمكنني معرفة كيفية عمله في العمل في IE.

هنا رمز JS:

$ (وثيقة). READER (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,
});

}) ؛ // نهاية

إليك رابط لما لدي حتى الآن. العرض التوضيحي

اي مساهمه في هذا ستكون خدمة عظيمة!

Answer 1

أشار أحد المستخدمين في منتديات jQuery إلى أنه كان لدي إضافي ، كنت بحاجة إلى تغيير Visbile: 5 ، إلى مرئي: 5

لقد عملت بشكل رائع والآن تعمل شرائح الشرائح في IE. لقد اختبرت IE 6 إلى IE 8. يميل إلى العمل بشكل أفضل في IE إذا كنت ولكن رمز JS في علامة الرأس بدلاً من نهاية الصفحة. اعتقدت أنني سأشارك هذا في حالة رغبة أي شخص آخر في استخدام هذا.