За свою жизнь я не могу понять, что здесь не так.Все отлично работает в IE9, FF и webkit.В IE8 и IE7 pageAnchorBuilder не создает изображения пейджера.
Вот 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');
});
});
Вот соответствующий 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; }