2012-01-06 3 views
0

У меня этот пейджер работает: http://jquery.malsup.com/cycle/pager6.html Но что, если у меня есть несколько слайд-шоу на 1 странице, и я не хочу использовать ID для пейджера. Но используйте ближайший элемент с классом X в качестве пейджера.jQuery cycle pager

Можно ли это сделать?

Это мой текущий код:

$(document).ready(function() 
{ 
    $('.photoGallerySlideshowAlbum').cycle(
    { 
     fx: 'fade', 
     pager: '#photoGallerySlideshowPager', 
     activePagerClass: 'selected', 
     pagerAnchorBuilder: function(idx, slide) 
     { 
      return '#photoGallerySlideshowPager li:eq(' + idx + ') a'; 
     }, 
     after: function(currentImage, nextImage, options) 
     { 
      var captions = $(this).parent().parent().find('.photoGallerySlideshowCaptions').children().hide(); 
      var caption = $(captions[options.currSlide]); 
      caption.show(); 
     } 
    }); 
}); 

Я сделал это сейчас, как это:

$(document).ready(function() 
{ 
    $('.photoGallerySlideshowAlbum').each(function(index, value) 
    { 
     var elPager = $(this).parent().find('.photoGallerySlideshowPager'); 

     $($(this)).cycle(
     { 
      fx: 'fade', 
      pager: elPager, 
      activePagerClass: 'selected', 
      pagerAnchorBuilder: function(idx, slide) 
      { 
       return 'li:eq(' + idx + ') a'; 
      }, 
      after: function(currentImage, nextImage, options) 
      { 
       var captions = $(this).parent().parent().find('.photoGallerySlideshowCaptions').children().hide(); 
       var caption = $(captions[options.currSlide]); 
       caption.show(); 
      } 
     }); 
    }); 
}); 

Но я не знаю, как изменить pagerAnchorBuilder. Мой html выглядит так (не может быть изменен).

<div class="photoGallerySlideshowPager"> 
        <ul> 
<li><a href="#">a</a></li> 
<li><a href="#">b</a></li> 
<li><a href="#">c</a></li> 
        </ul> 
       </div> 
+0

I Я не уверен, что у меня есть ваш вопрос. Вы хотите несколько слайд-шоу, верно? Не могли бы вы просто создать здесь еще одну? Я что-то упускаю? И что вы имеете в виду, что не хотите использовать идентификатор для пейджера? – rgin

+0

Свойство пейджера для цикла jQuery принимает идентификатор для элемента в демонстрации, он хочет передать что-то, что соответствует текущему ползунку, который инициализируется. – Vigrond

ответ

0

В исх JQuery цикла говорится:

pager:   null, // element, jQuery object, or jQuery selector string for the element to use as pager container 

http://jquery.malsup.com/cycle/options.html

Таким образом, вы должны быть в состоянии передать объект JQuery этому свойству так:

pager: $(this).closest('.nav')