Se que este tema se ha tocado pero no encuentro algo interesante para poder hacer lo que quiero... ningun plugin satisface mis necesidades, asi que les comento:
Quiero hacer un catalogo de productos, en donde cada producto puede estar destacado o no. Cuando un producto es destacado lo vamos a llamar producto estrella.
Si un producto es estrella tendra unas dimensiones alto y ancho superiores a un producto que no es estrella.
Estos productos se van a mostrar en un contenedor de ancho y alto fijos...
Lo que yo necesito es paginar el catalog....
Lo que tengo hasta el momento es:
1. consulto los productos de un negocio y los obtengo en formato json.
2. con un switch defino si se pinta como producto estrella o no.
3. Los productos se pintan sobre una capa id parrilladeproductos+j, donde j es el numero actual de la pagina.
4. Cuando parrilladeproductos+j llega al limite del alto de su contenedor padre, se pagina.
Pero el problema esta en el punto 4, que no termina de pintar el producto a lo ancho y me queda un vacio inmenso....
Graficamente:
El codigo que tengo hasta ahora es el siguiente:
Código Javascript
:
Ver originalfunction PaginarListaProductos(objson,grandparent){
$('#'+grandparent).css({height:'22em'});
//arreglo global de paginas
var cantidadpaginas = Array();
var numproducto = 0;
//se valida el tamaño del contenedor padre, si llego al 100% del ancho de la capa abuelo se pagina
for(j = 0; j < objson[0].productos.length;j++){
Nuevodiv('parrillaproductos'+j,'parrproductos','',grandparent);
$('#parrillaproductos'+j).css('overflow','hidden');
cantidadpaginas[j] = 'parrillaproductos'+j;
var productosrestantes = objson[0].productos.length - numproducto;
for(i = numproducto;i < objson[0].productos.length; i++){
PintarProductoGold(objson[0].productos[i].producto.idproducto,objson[0].productos[i].producto.nombre,objson[0].productos[i].producto.valor,objson[0].productos[i].producto.estrella,objson[0].productos[i].producto.imagen,'parrillaproductos'+j);
productosrestantes--;
//aqui valido el alto de la parrilla y el contenido principal
if($('#'+grandparent).height() < $('#parrillaproductos'+j).height()+166){
numnegocio = i+1;
break;
}
}
if(productosrestantes == 0){
break;
}
}
//aqui empieza la paginacion....
if(cantidadpaginas.length > 1){
for(var k = 0; k < cantidadpaginas.length;k++){
if(k == 0){
$('#'+cantidadpaginas[0]).css('display','block');
Nuevodivp('adelante','largetitle',"<img src='http://www.yellowcg.com/images/icons/adelante.png' onclick=\"$('#"+cantidadpaginas[1]+"').css('display','block');$('#"+cantidadpaginas[0]+"').css('display','none');\" height='22' style='cursor:pointer'/>",cantidadpaginas[0]);
}
else if(k == cantidadpaginas.length - 1 ){
$('#'+cantidadpaginas[k]).css('display','none');
Nuevodivp('adelante','largetitle',"<img src='http://www.yellowcg.com/images/icons/atras.png' onclick=\"$('#"+cantidadpaginas[k-1]+"').css('display','block');$('#"+cantidadpaginas[k]+"').css('display','none');\" height='22' style='cursor:pointer'/>",cantidadpaginas[k]);
}
else{
$('#'+cantidadpaginas[k]).css('display','none');
Nuevodivp('atrasadelante','largetitle',"<img src='http://www.yellowcg.com/images/icons/atras.png' onclick=\"$('#"+cantidadpaginas[k-1]+"').css('display','block');$('#"+cantidadpaginas[k]+"').css('display','none');\" height='22' style='cursor:pointer'/><img src='http://www.yellowcg.com/images/icons/adelante.png' onclick=\"$('#"+cantidadpaginas[k+1]+"').css('display','block');$('#"+cantidadpaginas[k]+"').css('display','none');\" height='22' style='cursor:pointer'/>",cantidadpaginas[k]);
}
}
}
}
Con lo que tengo no me funciona porque al pintar el primer di de la ultima fila, se pagina de inmediato....
Asi:
Se me ocurre algo con el top, left... pero no estoy seguro de como hacerlo
me echais una mano por favor?