jQuery Cycle - добавить миниатюры в версию пейджера

Я использую плагин jQuery Cycle с нумерацией страниц, найденной здесь (примерно на полпути вниз по странице) .

В настоящее время вся моя нумерация страниц выглядит как простые теги 1, 2, 3, 4 a, как в примере. Однако вместо этого я хочу сделать эти миниатюры.

Похоже, что навигационный блок создается самим сценарием плагина, поэтому, если я создам свой собственный список миниатюр и укажу их в качестве элементов навигации, плагин просто добавит свою собственную нумерацию страниц к этому блоку.

Кто-нибудь знает, как правильно изменить этот плагин, чтобы разрешить миниатюры изображений?

Мой код:

$('#frontimageswap') 
  .before('<div id="nav">') 
  .cycle({ 
    fx:     'turnDown', 
    speed:  'fast', 
    timeout: 5000, 
    pager:  '#nav' 

});

javascript jquery jquery-plugins jquery-cycle
person MeltingDog    schedule 28.05.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Приятно наконец увидеть, что кто-то другой использует этот замечательный плагин вместо jCarusel! Что вы хотите сделать, объясняется в этой демонстрации.

Код примерно такой:

$('#slideshow').before('<ul id="nav">').cycle({ 
    fx:     'turnDown', 
    speed:  'fast', 
    timeout: 0, 
    pager:  '#nav', 

    // callback fn that creates a thumbnail to use as pager anchor 
    pagerAnchorBuilder: function(idx, slide) { 
        return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>'; 
    } 
});

Он использует функцию pageAnchorBuilder, которая запускается один раз для каждого элемента в цикле. Здесь у вас есть доступ к текущему слайду и idx. Вы ничего не говорите о своей разметке или о том, как создаются эскизы, но это должно помочь вам начать.

Примечание. Я не изменил настройки в соответствии с вашими.

person OptimusCrime    schedule 28.05.2013
comment
Спасибо! Но, похоже, он не распознает pagerAnchorBuilder. Я получаю непредвиденную ошибку идентификатора. Требуется ли для этого определенная версия Jquery (я использую 1.8)? - person MeltingDog; 28.05.2013
comment
@MeltingDog: не следует подключать к версии jQuery. Вы уверены, что загрузили это: malsup.github.io/jquery.cycle.all.js ? - person OptimusCrime; 28.05.2013
comment
Извините, это моя вина - я пропустил запятую после пейджера: '#nav' - person MeltingDog; 28.05.2013
comment
@MeltingDog: Конечно, без проблем. Рад, что смог помочь! - person OptimusCrime; 28.05.2013