Плагин jQuery Cycle pagerAnchorBuilder изображения становятся неопределенными - PullRequest
Новая
       7

Плагин jQuery Cycle pagerAnchorBuilder изображения становятся неопределенными

2 голосов
/ 18 марта 2010

У меня есть слайд-шоу, встроенное во флеш-память, которое я хочу имитировать в 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>';
    }

});

});

Ответы [ 4 ]

3 голосов
/ 06 октября 2010

Я использовал JQuery.find(), чтобы помочь найти изображения и сохранить код достаточно модульным для использования с разметкой:

2 голосов
/ 18 марта 2010

Прочтите, это может вам помочь!

jQuery Cycle pagerAnchorBuilder

1 голос
/ 07 ноября 2012

Со ссылкой на комментарий 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>';
0 голосов
/ 24 марта 2010

Кажется, это общая проблема! Проверьте цикл с якорями , а также цикл "slideExpr"

...