JQuery цикл пейджер - PullRequest
       18

JQuery цикл пейджер

0 голосов
/ 06 января 2012

У меня работает этот пейджер: 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>

1 Ответ

0 голосов
/ 06 января 2012

В цикле 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')
...