Sigueme por RSS! RSS

JW Image Rotador - Javascript

longtailvideo nos trae un slideshow que trabaja con Adobe Flash y que permite visualizar imágenes secuencialmente con transiciones fluidas. Se pueden cargar las direcciones de las imágenes directamente desde un archivo XML.

Principales características:
- efectos entre transiciones.
- soporte listas RSS, XSPF o ASX.
- soporte de listas de reproducción en formatos JPG, PNG y GIF.
- flashvars - una amplia lista de variables para configurar el comportamiento y aparencia del slideshow.
- API Javacript.
- requiere de flash 8 o superior.

Para ver un ejemplo de su funcionamiento, puedes echarle un vistazo a la Web de Marco Séneca.

Uso:
1.- lo primero es descargar el JW image rotador.
2.- copiar los archivos imagerotator.swf e imagerotator.xml, junto con las imagenes a usar, a un directorio determinado dentro de tu proyecto.
3.- editar el archivo imagerotator.xml para que contenga los títulos, enlaces y URLs de sus imágenes. Agregar nuevos elementos si es necesario.
(clic para mostrar/ocultar ejemplo).
<?xml version="1.0" encoding="utf-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
  <trackList>
    <track>
      <title>Titulo 1</title>
      <creator>autor 1</creator>
      <location>imagen1.jpg</location>
    </track>
    <track>
      <title>Titulo 2</title>
      <creator>autor 2</creator>
      <location>imagen2.jpg</location>
    </track>
    <track>
      <title>Titulo 3</title>
      <creator>autor 3</creator>
      <location>imagen3.jpg</location>
    </track>
</playlist>

4.- incluimos el script requerido, configuramos e indicamos en que div se mostrara el slider.
(clic para mostrar/ocultar ejemplo).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
  <title>JW Image Rotator</title>
</head>
<body>
  <!-- div donde se mostrara el slider -->
  <div id="container">
     <!-- mensaje a mostrar en caso se ausencia del plugin o desactivación de JavaScript -->
     JW Image Rotador requiere de
     <a href="http://www.macromedia.com/go/getflashplayer">Flash Player</a>
     y tener activo JavaScripts en tu navegador Web.
  </div>

  <!-- incluimos el JS -->
  <script type="text/javascript" src="swfobject.js"></script>
  <!-- configuramnos el componente -->
  <script type="text/javascript">
    var s1 = new SWFObject("imagerotator.swf","rotator","400","200","7");

    // nombre del archivo xml con los datos de las imágenes
    s1.addVariable("file","archivo.xml");

    s1.addVariable("width","400");  // el ancho
    s1.addVariable("height","200"); // el alto

    // nombre del div que mostrara el slider
    s1.write("container");
  </script>
</body>
</html>


otros parámetros:

- Puedes indicar que efectos deseas usar, por defecto es random, puedes usar: fade, bgfade, blocks, bubbles, circles, flash, fluids, lines o slowfade.
s1.addVariable("transition","circles");

- ocultando los botones de navegación
s1.addVariable("shownavigation","false");

- determinando si se permite o no mostrar en pantalla completa
s1.addParam("allowfullscreen","true");

Referencias:
Sitio oficial: longtailvideo

0 comentarios: Suscribete a los comentarios por RSS

Publicar un comentario

- Los comentarios están siendo moderados y serán publicados en la brevedad posible.