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
Respuesta
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
podría agregar donde puso estas líneas de código, gracias – skurt
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 –
, lo intenté y estoy funcionando muy bien, pero hay un problema en este registro que no se muestra en orden. – mjdevloper
es posible que desee mirar a serialScroll o localScroll en lugar de jCarousel.
Encontré esta publicación en Grupos de Google que tiene una versión funcional para varias filas. Lo he usado y funciona genial. http://groups.google.com/group/jquery-en/browse_thread/thread/2c7c4a86d19cadf9
Gracias, lo usé y funciona bien. Los grupos de Google destruyen el formato, así que tuve que pasar y eliminar un montón de líneas nuevas, sin embargo. –
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
Intenté esto pero no puedo hacer que funcione. ¿Puedes idear un jsfiddle para demostrar? –
@DanHealy: enlace roto – Wanderer
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
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 />');
};
- 1. Actualizar varias filas con una consulta
- 2. ¿Actualizar varias filas con una consulta?
- 3. ¿Cómo elimino varias filas con diferentes ID?
- 4. Actualizando varias filas con valores diferentes
- 5. Insertar varias filas con una sola consulta
- 6. SQL dividir varias columnas en varias filas
- 7. jQuery jCarousel - cómo eliminar el jCarousel de un elemento
- 8. Dividir varias columnas en varias filas
- 9. Sum varias filas
- 10. Jquery - error en jcarousel
- 11. Insertar varias filas usando JdbcTemplate
- 12. Insertar varias filas usando seleccionar
- 13. Concatenación de filas con FOR XML, pero con varias columnas?
- 14. Desplácese hasta el primer elemento de jcarousel
- 15. Insertar varias filas en Oracle
- 16. eliminar filas de varias tablas
- 17. php mysql_insert_id en varias filas?
- 18. Eliminar varias filas en DataGridView
- 19. seleccionar varias filas en UITableView
- 20. Insertar varias filas en MySQL
- 21. Jquery, Jcarousel desplazamiento suave infinito
- 22. Perl: actualizar varias filas con una llamada de MySQL
- 23. PHP: no se puede codificar json con varias filas
- 24. SQL Server 2005: Insertar varias filas con una sola consulta
- 25. Oracle combinar varias filas en una con título distinto
- 26. Encontrar filas con los mismos valores en varias columnas
- 27. ¿Es posible tener una selección sin tabla con varias filas?
- 28. MySql - ¿Insertar varias filas con una subconsulta unida?
- 29. concatenar varias filas en una matriz con SQL en PostgreSQL
- 30. insertando varias filas con un comando de inserción
¿Por qué no nos muestra el código que ha intentado hasta ahora, así que tenemos algo de qué trabajar desde ... –
¿Cuál es el código que ha intentado? Estoy pensando que requerirá una extensión o modificación a jCarousel. –