Плагин jQuery Cycle, изображения pagerAnchorBuilder становятся неопределенными
-
20-09-2019 - |
Вопрос
У меня есть встроенное во Flash слайд-шоу, которое я хочу имитировать в jQuery.В слайд-шоу в качестве номеров пейджера используются изображения из слайд-шоу.Проблема, с которой я столкнулся, заключается в том, что как только я применяю ссылки к изображениям слайд-шоу, изображение pagerAnchorBuilder возвращает неопределенное значение для источника изображения.
Javascript -
$(function() {
$('#slideshow').before('<ul id="nav">').cycle({
fx: 'fade',
timeout: 7000,
pager: '#nav',
pagerAnchorBuilder: function(idx, slide) {
return '<li><a href="#"><img src="' + slide.src + '" width="100" height="60" /></a></li>';
}
});
});
HTML-
<div id="slideshow" class="pics">
<a href="http://google.com"><img src="home_1.jpg" width="1000" height="600" /></a>
<a href="http://google.com"><img src="home_2.jpg" width="1000" height="600" /></a>
<a href="http://google.com"><img src="home_3.jpg" width="1000" height="600" /></a>
<a href="http://google.com"><img src="home_4.jpg" width="1000" height="600" /></a>
<a href="http://google.com"><img src="home_5.jpg" width="1000" height="600" /></a>
</div>
Если я удалю href из слайд-шоу, изображения на пейджере появятся без проблем.Я не уверен, это ошибка или мне нужно найти исправление?
Вот ответ -
$(function() {
$('#slideshow').before('<ul id="nav">').cycle({
fx: 'fade',
timeout: 7000,
pager: '#nav',
pagerAnchorBuilder: function(idx, slide) {
var img = $(slide).children().eq(0).attr("src");
return '<li><a href="#"><img src="' + img + '" width="100" height="60" /></a></li>';
}
});
});
Решение
Прочтите, это может вам помочь!
Другие советы
я использовал JQuery.find()
чтобы помочь найти изображения и сохранить модульность кода, чтобы его можно было использовать с различной разметкой:
pagerAnchorBuilder: function(idx, slide) {
return '<li><a href="#"><img src="'
+ jQuery(slide).find('img').attr('src')
+ '" width="120" /></a></li>';
}
Что касается комментария JVerstry (кстати, хороший JV!), у меня все работает отлично, в котором используется изображение и <a>
связь.Кроме того, миниатюры пейджера также отображают атрибут alt основного изображения:
return '<li class="slider-thumb"><a href="'+slide.href+'" id="pager-click" title="'+slide.title+'"><img src="'+ $(slide).find('img').attr('src')+'" width="90" height="69" class="fader" /></a><p class="slide-caption">'+ $(slide).find('img').attr('alt')+'</p></li>';
Похоже это общая проблема!Проверить цикл с якорями а также цикл "slideExpr"