Несколько рядов с jcarousel

Question

Я пытаюсь использовать jcarousel для создания контейнера из нескольких строк, я пробовал несколько вещей, но мне не повезло. Кто-нибудь может сделать какие-либо предложения о том, как его создать?

Answer 1

Это замены кода .js в соответствии с @Sike и немного больше от меня, высота не была установлена ​​динамически, теперь это так.

var defaults = {
        vertical: false,
        rtl: false,
        start: 1,
        offset: 1,
        size: null,
        scroll: 3,
        visible: null,
        animation: 'normal',
        easing: 'swing',
        auto: 0,
        wrap: null,
        initCallback: null,
        setupCallback: null,
        reloadCallback: null,
        itemLoadCallback: null,
        itemFirstInCallback: null,
        itemFirstOutCallback: null,
        itemLastInCallback: null,
        itemLastOutCallback: null,
        itemVisibleInCallback: null,
        itemVisibleOutCallback: null,
        animationStepCallback: null,
        buttonNextHTML: '<div></div>',
        buttonPrevHTML: '<div></div>',
        buttonNextEvent: 'click',
        buttonPrevEvent: 'click',
        buttonNextCallback: null,
        buttonPrevCallback: null,
        moduleWidth: null,
        rows: null,
        itemFallbackDimension: null
    }, windowLoaded = false;


    this.clip.addClass(this.className('jcarousel-clip')).css({
        position: 'relative',
        height: this.options.rows * this.options.moduleWidth
    });

    this.container.addClass(this.className('jcarousel-container')).css({
            position: 'relative',
            height: this.options.rows * this.options.moduleWidth
        });

    if (li.size() > 0) {
            var moduleCount = li.size();
            var wh = 0, j = this.options.offset;
            wh = this.options.moduleWidth * Math.ceil(moduleCount / this.options.rows);
            wh = wh + this.options.moduleWidth;

            li.each(function() {
                self.format(this, j++);
                //wh += self.dimension(this, di);
            });

            this.list.css(this.wh, wh + 'px');


            // Only set if not explicitly passed as option
            if (!o || o.size === undefined) {
                this.options.size = Math.ceil(li.size() / this.options.rows);
            }
        }

Это вызов при использовании static_sample.html пакета кода при загрузке jscarousel:

<script type="text/javascript">

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel( {
        scroll: 1,
        moduleWidth: 75,
        rows:2,        
        animation: 'slow'
    });
});

</script>

Если вам нужно изменить содержимое карусели и перезагрузить карусель, вам нужно сделать следующее:

// Destroy contents of wrapper
$('.wrapper *').remove();
// Create UL list
$('.wrapper').append('<ul id="carousellist"></ul>')
// Load your items into the carousellist
for (var i = 0; i < 10; i++)
{
$('#carouselist').append('<li>Item ' + i + '</li>');
}
// Now apply carousel to list
jQuery('#carousellist').jcarousel({ // your config });

Определение html карусели должно быть таким:

<div class="wrapper">
    <ul id="mycarousel0" class="jcarousel-skin-tango">
     ...<li></li>
     </ul>
</div>

Благодаря Webcidentes

Answer 2

Мы должны были сделать аналогичную модификацию. Мы делаем это, расширяя параметры по умолчанию, добавляя значение строки, а ширину каждого элемента (мы называем их модулями), затем делим ширину на количество строк.

Код, добавленный в функцию jCarousel ...

Добавить к настройкам по умолчанию:

moduleWidth: null,
rows:null,

Затем установите при создании jCarousel:

$('.columns2.rows2 .mycarousel').jcarousel( {
        scroll: 1,
        moduleWidth: 290,
        rows:2,
        itemLoadCallback: tonyTest,
        animation: 'slow'
    });

Найти и отредактировать строки в:

$.jcarousel = function(e, o) { 

if (li.size() > 0) {
...
moduleCount = li.size();
wh = this.options.moduleWidth * Math.ceil( moduleCount / this.options.rows );
wh = wh + this.options.moduleWidth;

this.list.css(this.wh, wh + 'px');

// Only set if not explicitly passed as option
if (!o || o.size === undefined)
   this.options.size = Math.ceil( li.size() / this.options.rows );

Надеюсь, это поможет,

Тони Диллон

Answer 3

Я нашел этот пост в группах Google, в котором есть рабочая версия для нескольких строк. Я использовал это, и это прекрасно работает. http://groups.google.com/group/jquery-en/browse_thread/thread/2c7c4a86d19cadf9

Answer 4

Вы можете посмотреть serialScroll или localScroll вместо jcarousel.

Answer 5

Если вам нужно быстрое решение для фиксированных или одноразовых требований, которое определенно не предполагает изменения кода основной библиотеки, который может время от времени обновляться, может подойти следующее Чтобы превратить следующие шесть элементов в два ряда на карусели:

<div class="item">contents</div>
<div class="item">contents</div>
<div class="item">contents</div>
<div class="item">contents</div>
<div class="item">contents</div>
<div class="item">contents</div>

Вы можете использовать маленький JS, чтобы обернуть div в группы LI по два, а затем инициализировать карусель. ваш сценарий может позволить вам выполнить группировку на сервере не всегда возможно. очевидно, вы можете расширить это количество строк, сколько вам нужно.

var $pArr = $('div.item');
var pArrLen = $pArr.length;
for (var i = 0;i < pArrLen;i+=2){
      $pArr.filter(':eq('+i+'),:eq('+(i+1)+')').wrapAll('<li />');
};  

Answer 6

Я попробовал описанные выше решения и обнаружил, что изменение исходного кода jCarousel было проблематично - оно показало мне некорректное поведение, потому что оно не подходило для некоторых функций jCarousel, таких как непрерывный цикл и т. Д.

Я использовал другой подход, который прекрасно работает, и я подумал, что другие тоже могут извлечь из этого пользу. Это код JS, который я использую для создания элементов li для поддержки jCarousel с несколькими строками с элегантным потоком элементов, то есть горизонтальной, затем вертикальной, а затем прокрутки:

123 | 789
456 | 0AB

Он добавит (значение var carouselRows) элементы в один li и, следовательно, позволит jCarousel поддерживать несколько строк без изменения исходного кода jCarousel.

// Populate Album photos with support for multiple rows filling first columns, then rows, then pages
var carouselRows=3; // number of rows in the carousel
var carouselColumns=5 // number of columns per carousel page
var numItems=25; // the total number of items to display in jcarousel

for (var indexpage=0; indexpage<Math.ceil(numItems/(carouselRows*carouselColumns)); indexpage++) // for each carousel page
{
    for (var indexcolumn = 0; indexcolumn<carouselColumns; indexcolumn++) // for each column on that carousel page
    {
        // handle cases with less columns than value of carouselColumns
        if (indexcolumn<numItems-(indexpage*carouselRows*carouselColumns))
        {
            var li = document.createElement('li');

            for (var indexrow = 0; indexrow < carouselRows; indexrow++) // for each row in that column
            {
                var indexitem = (indexpage*carouselRows*carouselColumns)+(indexrow*carouselColumns)+indexcolumn;

                // handle cases where there is no item for the row below
                if (indexitem<numItems) 
                {
                    var div = document.createElement('div'), img = document.createElement('img');
                    img.src = imagesArray[indexitem]; // replace this by your images source
                    div.appendChild(img);
                    li.appendChild(div);
                }
            }
            $ul.append(li); // append to ul in the DOM
        }
    }
}

После того, как этот код заполнит ul элементами li, должен быть вызван jCarousel.

Надеюсь, это кому-нибудь поможет.

Jonathan