Расширенный пейджер jQuery Cycle2 через API

Я использую этот плагин jQuery Cycle2 (http://www.malsup.com/jquery/cycle2/api/advanced.php), и я пытался создать собственный пейджер, используя заголовок внутри каждого слайда.

Документация для цикла 2 больше фокусируется на атрибутах данных в HTML, однако мне нужно выполнить плагин цикла 2 через его альтернативу javascript.

Я смотрел на этот buildPagerLink через API, но не могу понять.

$('.p-slider').on('cycle-bootstrap', function(e, optionHash, API) {
    API.buildPagerLink = function(opts, slideOpts, slide) {
        //CODE TO GET H2 TITLE
    }
});

В основном то, что я хочу, это. Каждый слайд имеет элемент <h2>. Я хочу, чтобы текст внутри этого был текстом ссылки для пейджера. Звучит просто, но я не могу понять.

Любая помощь будет оценена по достоинству.

Спасибо. Дэйв


jquery jquery-plugins jquery-cycle
person davebowker    schedule 08.04.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Существует известная ошибка с Cycle-Bootstrap, и поэтому, чтобы использовать это с buildPagerLink, вам необходимо привязать его к документу. Следующее вытянет текст h2 и создаст с ним пейджер:

$(document).on('cycle-bootstrap', function( e, opts, API ) {
    API.buildPagerLink = function(opts, slideOpts, slide) {
       var pagerLink;
    var pagers = opts.API.getComponent( 'pager' );
    pagers.each(function() {
        var pager = $(this);

            var markup = $('<span></span>').text($('h2', slide).text());
            pagerLink = $( markup ).appendTo( pager );
        pagerLink.on( opts.pagerEvent, function(e) {
            e.preventDefault();
            opts.API.page( pager, e.currentTarget);
        });
    });
    }
});

$('.slideshow').cycle();

Рабочая демонстрация: http://jsfiddle.net/lucuma/FetC8/1/

Выпуск в качестве ссылки: https://github.com/malsup/cycle2/issues/157

person lucuma    schedule 09.04.2013
comment
Спасибо за помощь, однако мне действительно нужен метод API для решения этой проблемы из-за CMS, с которой я работаю. - person davebowker; 10.04.2013
comment
Я не понимаю вашего комментария. То, что я предоставил, соответствует вашему вопросу о предоставлении альтернативы javascript. - person lucuma; 10.07.2013