Несколько строк с jcarousel

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

Код добавлен в функцию 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 );

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

Тони Диллон

Это замена кода .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

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

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

Я попробовал приведенные выше решения и обнаружил, что изменение исходного кода 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.

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

Джонатан

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

<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 />');
};