简体   繁体   中英

JQuery Cycle pagerAnchorBuilder Not Working in IE7 or IE8 - Works in IE9 and all others

For the life of me I cannot figure out what's wrong here. Everything works fine in IE9, FF and webkit. In IE8 and IE7 the pageAnchorBuilder doesn't build out the pager images.

Here's a url: http://nathab.ensocms.com/africa/botswana-kalahari-delta-beyond/slideshow/

$(function() {
    $('.trip-slideshow').after('<div class="trip-slideshow-pager">').cycle({
        fx:      'fade',
        speed:   'fast',
        timeout: 0, 
        pager:   '.trip-slideshow-pager', 
        pagerAnchorBuilder: function(idx, slide) { 
            return '<a href="#"><img src="' + slide.src + '" width="70" height="70" /></a></div>'; 
        },
        after:   function() {
            $('.trip-slideshow-caption').html(this.alt);
        }                 
    });

    // Scroll left one photo for each click of a photo

    $('.trip-slideshow-pager img').click(function() {

        var scrollPosition = $('.trip-slideshow-pager').scrollLeft();

        $('.trip-slideshow-pager').animate({scrollLeft: scrollPosition + 75}, '600');

    });   

});

Here's the corresponding CSS:

.trip-slideshow { 
    width:640px;
    margin-top:25px;
    height:452px; 
    margin-left:40px;
    margin-bottom:5px; }
.trip-slideshow img { width:640px; height:452px; }
.trip-slideshow-caption { 
    width:640px; 
    margin-left:40px; 
    padding:10px; 
    background:#000; 
    color:#fff; 
    -webkit-text-shadow:none;
    -moz-text-shadow:none;
    text-shadow:none;
    margin-bottom:40px;
}
.trip-slideshow-pager { 
    width:640px; 
    height:90px; 
    margin-left:40px; 
    margin-bottom:8px; 
    white-space:nowrap; 
    overflow-x:scroll; 
}
.trip-slideshow-pager a { width:70px; height:70px; margin-right:5px; }
.trip-slideshow-pager img { width:70px; height:70px; }

Figured it out. I removed the .after and just hard-coded the div on the page.

Thanks to this question/answer for getting me in the right direction.

Jquery after ie8/ie7 not working

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM