Ya tenía mucho que no escribía algo de diseño web/programación así que hoy es el día indicado para hacerlo. Recientemente he terminado una página web que hice a una inmobiliaria de Mexicali, donde me pidieron que metiera una galería de imágenes debajo del contenido del sitio con unas imágenes de unas casas que estuvieran moviéndose infinitamente.
El cliente me dijo que las hiciera con Flash, pero como odio el flash y ya casi no recuerdo como se usa, le sugerí otra cosa y mi alternativa fue utilizar un plugin de JQuery llamado JCarousel lite que hace lo que el quería y más.
El plugin esta muy bien documentado en la pagina de los creadores, así que explicaré lo básico para poder utilizarlo en cualquier pagina web y evitar el flash.
Lo primero que debemos hacer es descargar el script de JCarousel desde la página oficial y ponerle un nombre como jcarousel.js (descargar)
Como JCarousel depende de JQuery debemos descargarlo también, en mi caso utilice la API JQuery de Google para no descargarlo.
Ahora ya que sabemos estas dos cosas vamos a crear un documento HTML y vamos a llamar primero a estos 2 scripts dentro del archivo HTML colocando este código antes de la etiqueta < body >.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script><script type="text/javascript" src="jcarousellite_1.0.1.pack.js"></script> |
Debe quedar algo así
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> |
Lo siguiente es crear un DIV contenedor al que le vamos a decir que nuestra galería se mostrará en movimiento automáticamente. Y dentro de este tendremos otro DIV que dará formato a nuestras listas de imágenes.
Ahora lo que debemos hacer es meter una lista UL con todos los LI que necesitemos, estos últimos son los que van a contener las imágenes.
Debe quedar así
Ahora, debemos decirle a JCarousel con javascript que nuestra galería cambiara las imágenes automáticamente cada cierto tiempo, que mostrará solo una lista de 3 imágenes al mismo tiempo y la velocidad en la que serán mostradas.
Para hacer eso debemos copiar y pegar el siguiente script justo debajo de la etiqueta que cierra el último DIV.
<script type="text/javascript">// <![CDATA[ $(".auto .jCarouselLite").jCarouselLite({ auto: 300, visible:5 speed: 1500, }); // ]]></script> |
Una vez hecho todo esto nuestra galería de imágenes ya debe verse bien, si quieren saber mas sobre otras opciones les recomiendo lean la documentación de la pagina del autor, ahí encontrarán otros ejemplos y otras variables para modificar y visualizar su galería de otras formas.
Demo con dos ejemplos que hice : Jcarousel
Descargar archivos del ejemplo: Jcarousel
Hola muy bueno el articulo,te queria preguntar para hacer la segunda opcion de la demos que has puesto como se hace ya que soy novato en esto y no me entero todavia muy bien.
Saludos.
El llamado del script se hace así, btnNext y btnPrev son los botones para avanzar y retroceder.
< script type="text/javascript">
$(function() {
$(".anyClass").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev"
});
});
Tuve que poner un espacio en la etiqueta script porque el blog me filtra ese código.
Igual el final debe tener una etiqueta de cierre
< / script >Hola muy bueno el articulo,te quería preguntar como mostramos una por una
que las demás estén ocultas y una sola visible asta que presione un botón o se cumpla el tiempo
Hay que me se a olvidado sirve para blogger.
Perdona y saludos.
Si, también sirve, solo que tienes que alojar los scripts en algún servidor, puedes usar alguno gratuito.
Muchas gracias por la rapida contestacion y la ayuda,ya comentare como me a ido.
Muchas gracias de nuevo.
Saludos.
me gusta mucho los dos ejemplos de tu marquesina, oye se podra hacer con el feed? y no tenes que estar metiendo eso manualmente, hay un script que te pone los post recientes pero no se modificarlo para que sea como el carousel, se podra?
Si, se pueden hacer ambos.
El contenido de ese script lo metes en las listas
A ver si puedo hacer un tutorial
Hola ….muy bueno tu script, pero tengo un problema. la primera vez que ingreso a un sitio con la galeria. me muestras las imagenes muy chicas , tengo que actualizar para que me muestre la imagenes en tamaño dado…
que podra ser’
he intendado mil y un veces y no consigo el efecto carrusel.. necesito ayuda
que es lo que estas haciendo? muestra algo de código si es posible.
Queria prgunta si sabes como hago para dejarlo vertical y quitar el efecto que hace que se pare siga pare siga.. yo lo necesito en continuo movimiento sin delay!
Muchisimas gracias
nos salvas a todos!
Increible!!! me ayudaste muchisimo WoW, en verdad mil gracias!!!!
hola, muy buen aporte,
como cambio el tamaño del divisor ya que mis imagenes son mas grades que 125×125.
? ? ?
ya entendi como funciona, lo que pasa es que tengo varias imagenes de diferentes tamaños, pero la funcion javascript toma el tamaño de la mas pequeña, por eso no salen las imagenes grandes.
igual esta informacion le sirve a todos.