Цикл jQuery с якорями и миниатюрами

Я использую плагин jQuery Cycle для создания слайд-шоу, в котором основное изображение заключено в якорь, а также имеет навигацию по эскизам. В основном у меня есть тот же код из демонстрационной страницы jQuery Cycle. Как только я завернул изображения в ссылку, миниатюры сломались. Я попытался удалить «slide.src» для $('#slideshow img).attr('src'), но он все равно возвращается как неопределенный.

$('#slideshow').before('<ul id="slideshow-nav">').cycle({
 fx: 'fade',
 speed: 'slow',
 timeout: 0,
 pager: '#slideshow-nav',

 pagerAnchorBuilder: function(idx, slide){
 return '<li class="thumbnail"><a href="#"><img class="rounded" src="' + slide.src + '" width="137" height="129" /></a><span class="highlight"></span><span class="gloss"></span></li>';
 }
});

И мой html это.

<div id="slideshow">
 <a href="#"><img src="images/gyro.jpg"  alt="Gyro"></a>
 <a href="#"><img src="images/gyro.jpg"  alt="Gyro"></a>
 <a href="#"><img src="images/gyro.jpg"  alt="Gyro"></a>
 <a href="#"><img src="images/gyro.jpg"  alt="Gyro"></a>
 </div>

jquery jquery-plugins jquery-cycle
person Chad    schedule 01.12.2010    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вам необходимо предоставить действительный фрагмент HTML для $.before(). На данный момент у вас нет закрывающего тега </ul>. Самый чистый способ сделать это — самостоятельно закрыть тег:

$('#slideshow').before('<ul id="slideshow-nav" />').cycle({ ...

Если вы используете Firebug или инструменты разработчика в браузере Webkit, вы всегда можете увидеть, какие элементы находит jQuery, написав console.log($("#slideshow-nav")); или console.log($(slide)); в вашей функции обратного вызова.

person quis    schedule 01.12.2010
comment
Да, я зарегистрировал их, и они просто возвращаются как неопределенные. Это произошло после того, как я завернул изображения в #slideshow в якорь. До этого работало. - person Chad; 01.12.2010
comment
Возможно, добавление <a> нарушает селектор, который использует плагин. Если вы просто пытаетесь получить курсор в виде руки при наведении курсора на миниатюру, используйте вместо этого cursor: pointer; в CSS. - person quis; 01.12.2010

arrow_upward
0
arrow_downward

Неважно, я нашел ошибку где-то в моем скрипте, которая модифицирует миниатюры, которые по какой-то причине ломали изображения.

person Chad    schedule 01.12.2010