ImageFlow - Excelente plugin para mostrar imágenes con efecto CoverFlow, utilizado en MAC e iTunes.

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

Este espectacular plugin jQuery, completamente gratuito y de libre uso, muestra como crear galerías de fotos, o mostrar thumbnails de imágenes, mediante un efecto de animación conocido llamado Cover Flow, muy utilizado por el sistema operativo MAC en su explorador de archivos o el programa iTunes.

Es ideal para webmasters y diseñadores, que quieran crear sitios web interactivos, dándole un look y toque de profesionalismo, ya que está muy bien logrado.

Se puede utilizar para: Pase de fotografías en una lista de imágenes, sitios de comercio online para mostrar ofertas, promociones, novedades, y muchos otros usos, sólo basta usar la imaginación.

A continuación puedes ver mas información.

Mas información sobre el programa.

Indice - Contenido.

  1. Descripción del plugin ImageFlow
  2. Características.
  3. Ejemplos incluidos en la descarga.
  4. Implementación del plugin.

 

1 - Descripción del ejemplo para aplicar efecto animado.

Aquí puedes ver una captura de pantalla del ejemplo que incluye el plugin.

Para verlo en funcionamiento, haz clic en este enlace.

2 - Características.

  • Se puede visualizar el efecto en prácticamente todos los navegadores web.
  • Soporta casi todos los formatos de imágenes y gráficos: PNG, GIF, JPG etc ..
  • Crear efectos de reflexión ( Requiere PHP.)
  • Función de Scroll para ir cambiando las imágenes.
  • Soporte para añadir enlaces a las imágenes, ideal para agrandarla, dirigir a otra página, por ejemplo detalles de un producto, servicio, o simplemente un gráfico etc ..
  • El plugin se puede visualizar correctamente en dispositivos móviles: iPhone y iPod Touch
  • Efecto de modo circular.
  • Función de SlideShow para que se muestren las imágenes automáticamente sin necesidad de presionar el scroll.
  • Soporte para Captions, es decir para añadir un texto que acompañe a cada una de las imágenes.
  • Soporte para cambiar la imagen con la rueda del mouse.
  • Barra de carga.
  • Escalar los gráficos de forma automática.
  • Soporta múltiples instancias, es decir puedes colocar varios en la misma página web.

3 - Ejemplo incluidos en la descarga.

En el archivo ZIP para descargar, se incluyen dos ejemplos en PHP. Para probarlos, es necesario tener un servidor web local con PHP instalado en la PC y subirlo al directorio www, o subirlo a un sitio web vía FTP y ejecutar los archivos reflect2.php y reflect3.php.

4 - Implementación del plugin.

Primer paso:

Para poder ejecutar este plugin y mostrar las reflexiones y efectos de ImageFlow, es necesario contar con un servidor que posea PHP versión 4.3.2 o superior, y con la extensión GD 2.0.1 .

Los archivos necesarios son:

  • imageflow.js: El plugin jQuery
  • reflect2.php, reflect3.php: Ejemplos PHP.
  • imageflow.css: La hoja de estilos
  • slider.png: Archivo de imagen para la barra de scroll.

Paso 2:

Para implementarlo, es necesario colocar el siguiente código fuente en la sección HEAD de tu página XHTML. Esto enlazará a la hoja de estilos y al archivos Javascript con el plugin.

<link rel="stylesheet" href="imageflow.css" type="text/css" />
<script src="imageflow.js" type="text/javascript"></script>

El código que va en la sección BODY, y que permite mostrar el DIV con las imágenes y la barra de scroll, es el siguiente:

<div id="unique_name" class="imageflow">
<img src="dir/image_1.jpg" longdesc="URL_1" width="w_1" height="h_1" alt="Text_1" />
<img src="dir/image_2.jpg" longdesc="URL_2" width="w_2" height="h_2" alt="Text_2" />
<img src="dir/image_3.jpg" longdesc="URL_3" width="w_3" height="h_3" alt="Text_3" />
</div>

Nota Importante: En el nombre de la clase en el DIV, debe ser siempre imageflow para que funcione correctamente.

El otro código es muy simple, y hace referencia a las rutas de las imágenes, al ancho, al alto, y al texto o caption que se mostrará en cada uno de los gráficos.

Paso 3.

En el último paso, es necesario indicar el identificador único que se ha utilizado anteriormente en la página web ( En el ID del DIV, donde dice unique_name).

En la parte inferior del archivo imageflow.js se encuentran las siguientes líneas:

domReady(function()
{
var instanceOne = new ImageFlow();
instanceOne.init({ ImageFlowID: 'myImageFlow' });
});

El argumento 'myImageFlow', es el identificador que se deberá colocar en el DIV anterior, es decir debe ser el mismo, para poder crear una instancia.

Nota: para crear más de una instancia en la misma página web, puedes leer el archivo de documentación y los ejemplos en el sitio web del autor.


Requerimientos de instalación y uso.

Requiere : Librería jQuery ( Ya se incluye en el archivo de descarga ). Para los efectos de reflejo requiere PHP y GD+.

Compatible con la mayoría de los navegadores web

  • Internet explorer.
  • FireFox.
  • Chrome.
  • Opera
  • Otros.

Videos tutoriales.

No hay video tutoriales disponibles para este script..

Cambios, actualizaciones y mejoras del programa.

Buscar programas


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

Enlaces patrocinados.


Detalles y descargar

Web:
http://finnrudolph.de/ImageFlow
Licencia:
Gratis
Versión:
1.3.0
Idioma:
Inglés
Programa actualizado:


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