JQuery Cycle с якорями и миниатюрами - PullRequest
Новая
       6

JQuery Cycle с якорями и миниатюрами

0 голосов
/ 01 декабря 2010

Я использую плагин jQuery Cycle для создания слайд-шоу, в котором основное изображение обернуто в якорь, а также имеет навигацию по миниатюрам.У меня в основном тот же код со демонстрационной страницы цикла jQuery.Как только я обернул изображения в ссылку, эскизы сломались.Я пытался сбросить «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>

Ответы [ 2 ]

0 голосов
/ 01 декабря 2010

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

0 голосов
/ 01 декабря 2010

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

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

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

...