У меня работает этот пейджер: http://jquery.malsup.com/cycle/pager6.html
Но что, если у меня есть несколько слайд-шоу на 1 странице, и я не хочу использовать идентификатор для пейджера.
Но используйте ближайший элемент с классом X в качестве пейджера.
Можно ли это сделать?
Это мой текущий код:
$(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>