Duda jQuery Jcarousel
Hola de nuevo Carlos, vuelvo a acudir a ti pero con una duda totalmente diferente a la ultima. En esta ocasión he de crear una galería de imágenes (4columnasx3filas) de tal forma que se vayan moviendo. Mi intención es mostrar cada POR segundos 12 imágenes.
Encontre un script de Jcarousel que hace mas o menos lo que deseo pero no me permite mostrar 12 imagenes simultaneamente y cambiarlas todas al cabo de x segundos, ya que trabaja con etiquetas ul y li y no se si podrias indicarme alguna alternativa o algun script q pueda serme util.
Muchas gracias de antemano.
PD: te dejo el script que estoy utilizando en este momento:
<?php
$arr = array(1 => "books.png", 2 => "brush.png", 3=> "card.png", 4=> "chess.png", 5=> "games.png", 6=> "keyboard.png", 7=> "laptop.png", 8=> "map_blue.png", 9=> "map_red.png", 10=> "mouse.png", 11=> "page.png", 12=> "pencil.png", 13=> "pie_chart.png", 14=> "promo_green.png", 15=> "promo_orange.png", 16=>"promo_red.png", 17=>"promo_turquoise.png"
, 18=>"promo_violet.png", 19=>"security.png", 20=>"webcam.png", 21=>"comment.png", 22=>"accept.png", 23=>"add.png", 24=>"back.png");
?>
<html>
<head>
<title>Ejemplo: JQuery SlideShow</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jcarousellite_1.0.1.pack.js"></script>
</head>
<body>
<div class="auto carousel">
<div style="overflow: hidden; visibility: visible; position: relative; z-index: 2; left: 0px; width: 665px;" class="jCarouselLite">
<ul style="margin: 0pt; padding: 0pt; position: relative; list-style-type: none; z-index: 1; width: 2261px; left: -1596px;">
<?php foreach($arr as $clau=> $value){ ?>
<li style="overflow: hidden; float: left; "><img src="<?php echo $value; ?>" ></li>
<?php } ?>
</ul>
</div>
</div>
<script type="text/javascript">
$(".auto .jCarouselLite").jCarouselLite({
auto: 300,
speed: 1500,
visible:12
});
</script>
</body>
</html>
Encontre un script de Jcarousel que hace mas o menos lo que deseo pero no me permite mostrar 12 imagenes simultaneamente y cambiarlas todas al cabo de x segundos, ya que trabaja con etiquetas ul y li y no se si podrias indicarme alguna alternativa o algun script q pueda serme util.
Muchas gracias de antemano.
PD: te dejo el script que estoy utilizando en este momento:
<?php
$arr = array(1 => "books.png", 2 => "brush.png", 3=> "card.png", 4=> "chess.png", 5=> "games.png", 6=> "keyboard.png", 7=> "laptop.png", 8=> "map_blue.png", 9=> "map_red.png", 10=> "mouse.png", 11=> "page.png", 12=> "pencil.png", 13=> "pie_chart.png", 14=> "promo_green.png", 15=> "promo_orange.png", 16=>"promo_red.png", 17=>"promo_turquoise.png"
, 18=>"promo_violet.png", 19=>"security.png", 20=>"webcam.png", 21=>"comment.png", 22=>"accept.png", 23=>"add.png", 24=>"back.png");
?>
<html>
<head>
<title>Ejemplo: JQuery SlideShow</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jcarousellite_1.0.1.pack.js"></script>
</head>
<body>
<div class="auto carousel">
<div style="overflow: hidden; visibility: visible; position: relative; z-index: 2; left: 0px; width: 665px;" class="jCarouselLite">
<ul style="margin: 0pt; padding: 0pt; position: relative; list-style-type: none; z-index: 1; width: 2261px; left: -1596px;">
<?php foreach($arr as $clau=> $value){ ?>
<li style="overflow: hidden; float: left; "><img src="<?php echo $value; ?>" ></li>
<?php } ?>
</ul>
</div>
</div>
<script type="text/javascript">
$(".auto .jCarouselLite").jCarouselLite({
auto: 300,
speed: 1500,
visible:12
});
</script>
</body>
</html>
1 Respuesta
Respuesta de krlosnow
1
¿Entonces, ya no usas el carrusel, o es que jcarousel te permite visualizar las fotos en forma de matriz?
Hola Carlos, ya resolví la primera parte del problema, muestro 3 filas por 4 columnas de imágenes, 12 en todo momento, sin embargo, quiero que cada POR tiempo se cambien las 12 y de momento tan solo he conseguido que se muevan de 1 en 1.
¿Podrías idicarme alguna alternativa?
Si te hace falta el código nuevo avíseme.
Gracias
¿Podrías idicarme alguna alternativa?
Si te hace falta el código nuevo avíseme.
Gracias
Hola de nuevo Carlos, hice un apaño con el jcarousel, repitiendo el proceso 4 veces XDD; ya que solo me recorría una fila y he conseguido que me vaya recorriendo 4 filas replicando el código, pero la apariencia es muy pobre y estaría mejor intentar cambiar las 12 imágenes de golpe si existe alguna forma de hacerlo claro.
Lo que no entiendo es el porqué del carrusel. Si tienes un carrusel es para que las 12 fotos estén en línea, visualizándose tan solo parte de ellas, y con los cursores desplazarte por el carrusel. Si lo que quieres es tener una matriz de 3x4, generate en html 12 divs dispuestos en matriz, y mediante un script de refresco (setTimeout()) ir refrescando el contenido de los divs.
¿Sabes a priori las imágenes que quieres cargar en cada bloque, o se eligen aleatoriamente?
¿Sabes a priori las imágenes que quieres cargar en cada bloque, o se eligen aleatoriamente?
Son imágenes que recupero de una BBDD mysql con php y luego las envío al tpl para imprimirlas, pero lo de optar por el carousel era porque no tenia ni idea de como atajar el problema y en un primer momento me pareció buena la idea de intentar adaptarlo para mi necesidad pero suena bien la opción que me comentas. Eso si te agradecería que me explicases algo más sobre como podría hacerlo si puedes please.
Gracias de antemano.
Gracias de antemano.
Yo lo que haría es lo siguiente:
1) Crea una página html estática, con un div contenedor de imágenes, y script de llamada a la php.
2) El div contenedor lo puedes rellenar a pelo con otros 12 divs, o bien crearte un script que vaya generando los divs dependiendo de dos variables: NUMFILAS y NUMCOLUMNAS.
3) La php tendrá el código para obtener las imágenes guardadas en base de datos. Lo suyo es que genere 12 imágenes que serán las que se carguen en el contenedor.
4) El script de llamada a la php hará una llamada $('#contenedor'). load('imagenes.php'). Para implementar que se repita cada 10 segundos por ejemplo, usa un setTimeout("refrescoImagenes()", 10000).
Si tienes dudas en algún paso, me lo dices y te oriento en cosas concretas.
1) Crea una página html estática, con un div contenedor de imágenes, y script de llamada a la php.
2) El div contenedor lo puedes rellenar a pelo con otros 12 divs, o bien crearte un script que vaya generando los divs dependiendo de dos variables: NUMFILAS y NUMCOLUMNAS.
3) La php tendrá el código para obtener las imágenes guardadas en base de datos. Lo suyo es que genere 12 imágenes que serán las que se carguen en el contenedor.
4) El script de llamada a la php hará una llamada $('#contenedor'). load('imagenes.php'). Para implementar que se repita cada 10 segundos por ejemplo, usa un setTimeout("refrescoImagenes()", 10000).
Si tienes dudas en algún paso, me lo dices y te oriento en cosas concretas.
