Используя JQuery Cycle, как AnchorBuilder может найти SRC изображения в DIV? - PullRequest
Новая
       36

Используя JQuery Cycle, как AnchorBuilder может найти SRC изображения в DIV?

0 голосов
/ 10 апреля 2011

Плагин JQuery Cycle великолепен.Для моей конкретной установки я хотел бы объединить два из их примеров: миниатюрный пейджер и его способность циклически переключать DIV вместо изображений.

Цель состоит в том, чтобы создать настройку, в которой у вас есть набор миниатюрчто при нажатии изменить DIV.Этот DIV будет содержать большое изображение и поле с HTML (в частности, некоторые ссылки).

Я сделал его черновую версию здесь, с большими пальцами внизу слева и DIV в сером цвете.в правом нижнем углу.Изображение не мое;Я просто взял его для демонстрации:

http://i.stack.imgur.com/l49Kt.jpg

Цель: щелкните по миниатюре, и изменится и большое изображение, и текст в окне.

Миниатюры создаются путем получения атрибута SRC слайда и его сжатия.К сожалению, когда изображения встроены в DIV, плагин не может найти атрибут SRC, поэтому пиктограммы ломаются.

Ниже приведен код для построения цикла: 

<script type="text/javascript">
  $(function() {
    $('#slideshow').after('<ul id="nav">').cycle({
      fx: 'fade',
      speed:  'slow',
      timeout: 0,
      pager:  '#nav',
      pagerAnchorBuilder: function(idx, slide) {
        return '<li><a href="#"><img src="' + slide.src + '" width="49" height="25" /></a></li>';
            }
        });
    });
    </script>

Это прекрасно работает со следующим блоком HTML: 

<div id="slideshow" class="pics">
    <img src="/images/01_sm.jpg" class="first" title="title" height="329" />
    <img src="/images/02_sm.jpg" title="title" width="642" height="329" />
    <img src="/images/03_sm.jpg" title="title" width="642" height="329" />
</div>

Но, как уже упоминалось, разрывы, когда они заключены в DIV, таким образом: 

<div id="slideshow" class="pics">
    <div><img class="slideimg" src="/images/01_sm.jpg" class="first" title="title" height="329" /><div class="menu">foo</div></div>
    <div><img class="slideimg" src="/images/02_sm.jpg" title="title" width="642" height="329" /><div class="menu">foo</div></div>
    <div><img class="slideimg" src="/images/03_sm.jpg" title="title" width="642" height="329" /><div class="menu">foo</div></div>
</div>

Итак, после всего, что установлено, возникает вопрос:

Как заменить slide.src чем-то, что может посмотреть в вышеупомянутые DIV и найти SRC текущего слайда?

Заранее спасибо за вашу помощь.Я надеюсь, что решение будет достаточно простым, чтобы его можно было добавить в постоянно расширяющийся список примеров JQuery Cycle.

Ответы [ 2 ]

1 голос
/ 07 июня 2011

Как сказал Васу ... но вы должны использовать jQuery (слайд) вместо слайда: 

pagerAnchorBuilder: function(idx, slide) {
    return '<li><a href="#"><img src="' +
           jQuery(slide).find('img').attr('src') +
           '" width="49" height="25" /></a></li>';
}
1 голос
/ 13 апреля 2011

Вы пробовали это: 

pagerAnchorBuilder: function(idx, slide) {
    return '<li><a href="#"><img src="' + slide.find('img').attr('src') + '" width="49" height="25" /></a></li>';
        }
...