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
- Los comentarios están siendo moderados y serán publicados en la brevedad posible.