Cómo crear carruseles con detalle con jcarrusel y jtip

2
26369

 

Cómo crear carruseles con detalle con jcarrusel y jtip

 

1. Introducción

 

En este tutorial vamos a continuar con la misma temática que hemos ido siguiendo en los tutoriales de slimbox y de modalbox, es decir, vamos a presentaros librerias y utilidades que permitan hacer vuestras páginas más vistosas y más amigables en vistas al usuario final. Esta vez le toca en concreto a las librerias jcarrusel y jtip, las cuales usan por debajo jquery.

Pero, ¿cuál es la función de cada una de estas librerias?

 

JCarrusel os permitirá incluir un carrusel en vuestras páginas. El carrusel, aunque tambien es el nombre del último disco de los Dikers, es un elemento que os permitirá ver tan solo un subconjunto de elementos. Es decir, si teneis un album con 500 fotos, podreis crearos una ventana en un carrusel donde poder verlas de 5 en 5 e ir viendo fotos a medidas que os desplazais por la ventana del carrusel. He aqui un ejemplo donde lo entendereis mejor.

JTip os permitirá ver información de un elemento una vez pongais el ratón encima de ese elemento. Prara que os hagais una idea, es como el texto alternativo de una imagen pero bastante mas potente. Podeis ver un ejemplo aqui

 

2. Cómo usar JCarrusel

 

Lo primero que debemos hacer es bajarnos la librería desde su página web y seguir tres pasos muy sencillos:

 

1- Cargar las funciones javascript y las css dentro del head de la página:







 

2- Indicar el id del elemento que va a hacer de carrusel


  

 

3- Insertar una lista de elementos que mostrar en el carrusel




 

Como veis es bastante sencillo, y tiene un efecto bastante bonito.

 

3. Cómo usar JTip

 

Los pasos soy muy parecidos a los del caso anterior. Bajamos el ejemplo con la librería desde la web del ejemplo y seguimos dos pasos muy sencillos:

 

1- Cargar las funciones javascript y las css dentro del head de la página:






 

2- Crear hiperenlaces a páginas html que contendrán el código de las páginas que queremos mostrar como información detallada.

Go To Yahoo

 

Hay menos pasos que seguir que en el paso anterior y como podeis ver tambien queda bastante bonito.

 

4. Ejemplo del uso de ambas

 

A continuación os vamos a mostrar un ejemplo de cómo quea el uso conjunto de ambas librerias. Como podreis observar en determinados casos una puede complementar a la otra, por ejemplo, para mostrar en el carrusel información significante y permitir que se vea el detalle cada vez que se pone el ratón por encima de cada uno de los elementos del carrusel:

 

 

Eso si, os aviso que si quereis usarlas debereis tener cuidado de incluir solo una vez las librerias de jquery. Ademas puede que necesiteis modificar los estilos para adaptar las librerias a vuestro caso particular.

 

5. Conclusiones

 

Como podeis haber visto es muy sencillo mejorar el aspecto de vuestras aplicaciones utilizando librerias de este estilo, lo cual os permite darle al cliente final un añadido en forma de efectos gráficos que seguramente le vayan a gustar. Sólo me queda citar un dicho, y es que sólo hay algo peor que un diseñador programando, y ese algo es un programador diseñando.

Espero que os sea de utilidad.

 

 

2 COMENTARIOS

  1. Buenas tardes;

    he intentado insertar el Jtip (el jcarousel funciona) y no me funca; yo diria que no coje el jtip; ya ke si redirige a la pagina con la info. Si tienen alguna solucion, agradeceria que me la enviasen; gracias de antemano

  2. Estoy intentando colocar unas imágenes del tamaño width=\\\»353\\\» height=\\\»212\\\» pero el skin no se ajusta al tamaño de dichas imágenes que parte tengo que modificar para colocarlas y se vean correctamente ? agradecería cualquier ayuda .

DEJA UNA RESPUESTA

Por favor ingrese su comentario!

He leído y acepto la política de privacidad

Por favor ingrese su nombre aquí

Información básica acerca de la protección de datos

  • Responsable:
  • Finalidad:
  • Legitimación:
  • Destinatarios:
  • Derechos:
  • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad