2008-10-17 44 views
6

Estoy tratando de usar jcarousel para construir un contenedor con varias filas, he intentado algunas cosas pero no he tenido suerte. ¿Alguien puede hacer alguna sugerencia sobre cómo crearlo?Varias filas con jcarousel

+0

¿Por qué no nos muestra el código que ha intentado hasta ahora, así que tenemos algo de qué trabajar desde ... –

+0

¿Cuál es el código que ha intentado? Estoy pensando que requerirá una extensión o modificación a jCarousel. –

Respuesta

8

Hemos tenido que hacer una modificación similar. Hacemos esto ampliando las opciones predeterminadas, para incluir un valor de filas y el ancho de cada elemento (los llamamos módulos) y luego dividimos el ancho por el número de filas.

Código añadido a la función jCarousel ...

Añadir a opciones por defecto:

moduleWidth: null, 
rows:null, 

A continuación, establezca la hora de crear jCarousel:

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

El hallazgo y editar las líneas de:

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

Espero que esto ayude,

, Tony Dillon

+2

podría agregar donde puso estas líneas de código, gracias – skurt

+0

Podría haber hecho algo más mal que lo necesite pero en pos: función (i, fv) He añadido si (i> = this.options.size) { i = i - this.options.size; } para hacer que la acción de desplazamiento vuelva al lugar correcto al hacer clic en la fila inferior –

+0

, lo intenté y estoy funcionando muy bien, pero hay un problema en este registro que no se muestra en orden. – mjdevloper

10

Esto es .js sustituciones de código según @Sike y un poco más de mí, la altura no se estableció dinámicamente, ahora lo es.

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

Esta es la llamada en el uso de la static_sample.html del paquete de código en la descarga de jscarousel:

<script type="text/javascript"> 

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

</script> 

En caso de tener que cambiar el contenido del carrusel y volver a cargar el carrusel se necesita hacer esto:

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

El carrusel definición html tiene que ser así:

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

Gracias a Webcidentes

+3

Intenté esto pero no puedo hacer que funcione. ¿Puedes idear un jsfiddle para demostrar? –

+0

@DanHealy: enlace roto – Wanderer

0

Me trataron las soluciones anteriores y encontraron cambiar el código original jCarousel a ser un problema - que presentó un comportamiento incorrecto para mí, ya que no jugó bien, con algunas de las características de jCarousel como el bucle continuo, etc.

Utilicé otro enfoque que funciona muy bien y pensé que otros podrían beneficiarse de él también. Es el código JS que uso para crear los elementos li para admitir un jCarousel con varias filas con elegante flujo de elementos, es decir, llenar horizontalmente, luego verticalmente, luego scrollpages:

123 | 789
456 | 0AB

Agregará (valor de var carruselRows) elementos a un único li y, como tal, permite que jCarousel admita varias filas sin modificar el código jCarousel original.

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

Después de que este código haya rellenado el ul con los elementos li jCarousel debe invocarse.

Espero que esto ayude a alguien.

Jonathan

0

Si necesita una solución rápida para una sola vez requerimiento fijo o que definitivamente no implique el cambio de código de la biblioteca central que puede ser actualizada de vez en cuando, lo siguiente puede adaptarse. Para activar los siguientes seis puntos en dos filas en el carrusel:

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

se puede usar un poco de JS para envolver los divs en grupos de dos, entonces LI inicializar el carrusel. su escenario puede permitirle hacer la agrupación en el servidor no siempre es posible. obviamente puedes extender esto a cuantas filas necesites.

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