Righe multiple con jcarousel

Question

Sto cercando di usare jcarousel per costruire un contenitore con più file, ho provato alcune cose ma non ho avuto fortuna. Qualcuno può dare qualche suggerimento su come crearlo?

Answer 1

Abbiamo dovuto apportare una modifica simile. Lo facciamo estendendo le opzioni predefinite, per includere un valore di righe e la larghezza di ogni elemento (li chiamiamo moduli), quindi dividiamo la larghezza per il numero di righe.

Codice aggiunto alla funzione jCarousel ...

Aggiungi alle opzioni predefinite:

moduleWidth: null,
rows:null,

Quindi impostare quando si crea jCarousel:

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

Trova e modifica le righe in:

$.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 );

Spero che questo aiuti,

Tony Dillon

Answer 2

Si tratta di sostituzioni di codice .js secondo @Sike e un po 'più di me, l'altezza non è stata impostata dinamicamente, ora lo è.

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

Questa è la chiamata nell'uso di static_sample.html del pacchetto di codici nel download di jscarousel:

<script type="text/javascript">

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

</script>

Nel caso in cui sia necessario modificare il contenuto della giostra e ricaricare la giostra, è necessario eseguire questa operazione:

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

La definizione html della giostra deve essere così:

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

Grazie a Webcidentes

Answer 3

potresti voler guardare serialScroll o localScroll invece di jcarousel.

Answer 4

Ho trovato questo post su Google Gruppi che ha una versione funzionante per più righe. L'ho usato e funziona benissimo. http://groups.google.com/group/jquery-en/ browse_thread / filetto / 2c7c4a86d19cadf9

Answer 5

Ho provato le soluzioni di cui sopra e ho scoperto che cambiare il codice jCarousel originale era problematico: mi ha introdotto un comportamento errato perché non funzionava bene con alcune delle funzionalità di jCarousel come il loop continuo ecc.

Ho usato un altro approccio che funziona alla grande e ho pensato che anche altri potrebbero trarne beneficio. È il codice JS che uso per creare gli oggetti li per supportare un jCarousel con più righe con un flusso elegante di elementi, ovvero riempire orizzontalmente, quindi verticalmente, quindi scrollpages:

123 | 789
456 | 0AB

Aggiungerà elementi (valore di var carouselRows) a un singolo li e come tale consente a jCarousel di supportare più righe senza modificare il codice jCarousel originale.

// 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
        }
    }
}

Dopo aver riempito questo codice, ul con le voci li dovrebbe essere invocato jCarousel.

Spero che questo aiuti qualcuno.

Jonathan

Answer 6

Se hai bisogno di una soluzione rapida per un requisito fisso o una tantum che sicuramente non comporta la modifica del codice della libreria di base che può essere periodicamente aggiornato, potrebbe essere adatto quanto segue. Per trasformare i seguenti sei elementi in due file sulla giostra:

<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>

puoi usare un po 'di JS per avvolgere i div in gruppi LI di due, quindi inizializzare il carosello. lo scenario potrebbe consentire di eseguire il raggruppamento sul server non è sempre possibile. ovviamente puoi estenderlo a tutte le righe di cui hai bisogno.

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