Plugin para jQuery que permite crear efectos y transiciones en gráficos.

Más sobre el programa :: Requerimientos :: Videos :: Actualizaciones

Esta es una extensión o plugin para la conocida librería jQuery, con la que es posible generar y crear distintos tipos de efectos y transiciones de imágenes.

Con el script, podrás crear desde efectos simples de transición de gráficos y fotos para tu página, como también incluye otros efectos y ejemplos avanzados.

Puede ser ideal para varios usos, por ejemplo: Mostrar en un marco o panel varias fotos cada un cierto intervalo de tiempo ( tipo presentación), para visualizar un catálogo de productos, etc...

A continuación se describen las opciones principales y también un simple manual de como instalarlo e implementarlo dentro de tus páginas webs.

Mas información sobre el programa.

Indice - Contenido.

  1. Efectos disponibles para animar imágenes y fotos.
  2. Ejemplos de animación y posibles usos.
    1. Paginación de imágenes 1.
    2. Paginación de imágenes 2.
    3. Botonera para pausar, reproducir, atrás y siguiente.
    4. Sólo reproducir y pausar.
    5. SlideShow con imágenes de diferentes tamaños.
    6. SlideShow continuo.
  3. Cómo instalar y usar el script en la página web.
  4. Lista de opciones para configurar las transiciones, efectos etc ..
  5. Acerca de la licencia.

 

1 - Efectos disponibles para animar imágenes y fotos.

El script permite utilizar varios efectos, mas de 20. En la siguiente dirección del autor, puedes ver una lista y probarlo online. Incluye:

  • Scroll desde diferentes ángulos y slide.
  • Efecto de zoom
  • Slide.
  • Shuffle.
  • Efecto de desvanecimiento o Fade.
  • Entre otros.

Ir a la página para ver los ejemplos.

2 - Ejemplos de animación y posibles usos.

El plugin se puede utilizar para varios usos, como por ejemplo:

Nota: Todos estos demos y ejemplos los puedes ver pinchando en este enlace. Hay muchos otros, y cada uno de ellos, además de la descripción, incluye el código Javascript y el html para poder utilizarlo e insertarlo en la página.

2.1 - Paginación de imágenes 1.

Crear paginación de imágenes, y mostrar un efecto al cargar un nuevo gráfico. Incluso de puede definir cuál es la imagen inicial que se mostrará al cargar la página por primera vez. ( Es el ejemplo jQuery Cycle Plugin - Starting Slide Demo)

2.2 - Paginación de imágenes 2.

Otro para paginar imágenes, pero a diferencia del anterior, en vez de utilizar una barra de navegación numérica, utiliza thumbnails para cada imagen. ( Se encuentra en la página jQuery Cycle Plugin - Advanced Pager Demo)

Aquí se utiliza en la opción Pager, el valor #Nav para el ID de la barra de navegación.

2.3 - Botonera para pausar, reproducir, atrás y siguiente.

Crear una botonera con las clásicas opciones para reproducir un slideshow: Play, Pausa, siguiente imagen y anterior. La botonera solo se despliega y hace visible, cuando el usuario coloque el cursor encima del panel o gráfico. ( Es el ejemplo hover-driven control panel.)

2.4 - Sólo reproducir y pausar.

Este otro código fuente es mas simple que el anterior, sólo posee dos botones: Pause para pausar en cualquier momento la reproducción de las imágenes, y resume para continuar la reproducción. ( Es el ejemplo Pause / Resume Demo )

2.5 - SlideShow con imágenes de diferentes tamaños.

Muestra como realizar un slideshow con imágenes que poseen un tamaño diferente. ( Es el ejemplo Slideshows with different size images ) , muy útil para cargar gráficos desde una url remota donde el tamaño puede llegar a variar.

2.6 - SlideShow continuo.

Ejemplo de slideshow continuo, es decir mostra runa imagen detrás de la otra, sin espera o delay. ( Es la página jQuery Cycle Plugin - 'continuous' Demo)

Utiliza el parámetro FX con el valor Shuffle y la opción Continuous con el valor 1.

3 - Cómo instalar y usar el script.

El script utiliza una única función llamada cycle, con la que, dependiendo el comando que se le pase como parámetro, servirá para manipular las diferentes opciones del slideshow: Pausa, play, previo, siguiente, stop etc ..

Para crear el ejemplo básico, (el que se encuentra publicado en la página), es muy sencillo de configurar y utilizar.

Como primer paso, deberemos hacer referencia a dos archivos javascript dentro de la cabecera del documento HTML. ( sección HEAD). Estos archivos son:

  • Librería jQuery: jQuery.min.js
  • El archivo de plugin: jquery.cycle.all.latest.js

También dentro de la sección head de la página, es necesario inicializar el script y definir el tipo de efecto que se aplicará a las imágenes. Esta función es muy sencilla:

Nota En la opción FX podemos especificar el efecto. ( ver la lista de opciones de posibles efectos a pasar)

Por último, las imágenes y fotos se visualizarán en un panel rectangular que se encuentra definido dentro de un DIV llamado SlideShow.

Dentro de este DIV, se pueden añadir todas las fotos y gráficos mediante una etiqueta IMG de HTML como lo haríamos para insertar cualquier gráfico dentro de una página web, por ejemplo:

4 - Lista de opciones para configurar las transiciones, efectos etc ..

También, es posible indicar muchas otras opciones de configuración para personalizarlo.

En la página de opciones, podrás ver algunas de las siguientes variables y parámetros:

  • Speed: Velocidad de transición de las imágenes. por ejemplo el valor 1000, indica un segundo entre cada pase de imagen.
  • slideREsize: Opción para redimensionar las imágenes.
  • randomizeEffects: Opción para generar los efectos de transición en forma aleatoria.
  • pauseOnPagerHover: Para detener o pausar el efecto de transición cuando el usuario coloque el mouse encima del gráfico.
  • Height y Width: Alto y ancho del contenedor de las imágenes.
  • fx: Nombre del efecto que se utilizará. Si no se especifica, se utilizará el efecto de tipo Fade. Nota: para utilizar todos los efectos disponibles, se puede pasar a este argumento, el valor ALL.
  • activePagerClass: Función para crear paginación de imágenes.
  • Varios otros.

Nota: En la siguiente página se pueden ver todas las opciones junto a una descripción, entre ellas : configurar la velocidad de la presentación de imágenes, el tipo de efecto, etc .. Ir a la web

5 - Acerca de la licencia.

Este plugin es completamente gratuito y de libre uso. Es software libre distribuido bajo licencia MIT y GPL.


Requerimientos de instalación y uso.

Lenguajes Javascript + jQuery.

Navegadores webs soportados

Internet Explorer 6, 7 y 8, FireFox, Google Chrome, Opera, otros.


Videos tutoriales.

1 - Video demostración.

En esta introducción, puedes ver la mayoría de los ejemplos y demostraciones que están publicadas en el sitio web.

Duración : 8 minutos.

 

Este video ( en idioma inglés), muestra algunas técnicas para configurar y crear slideshows.

Duración: 3 min , 15 segundos.

 

Video con los ejemplos publicados en el sitio oficial.

Muestra la vista previa de 3 tipos de efectos: Shufle, fade y zoom.

 

 

Cambios, actualizaciones y mejoras del programa.

Buscar programas


Introduce los términos de búsqueda ...

Enlaces patrocinados.


Detalles y descargar

Web:
www.malsup.com/jquery/
Licencia:
Gratis - Software libre
Versión:
2.94
Idioma:
Inglés
Programa actualizado:
29 SEP 2011


Si te ha gustado esta página, programa o artículo puedes votar haciendo clic en este botón: