uso Protoslideshow

Documentación y ejemplos de uso de Protoslideshow.


requisitos

Para usar Protoslideshow necesitamos incluir en nuestro documento el framework JavaScript Prototype, la librería de efectos Script.aculo.us , Usefull y por último Protoslideshow. El código sería algo como esto: 

       
 <head>
   .
   .
  <script type="text/javascript" src="ruta/a/prototype.js"></script>
  <script type="text/javascript" src="ruta/a/scriptaculous.js?load=effects"></script>
  <script type="text/javascript" src="ruta/a/usefull.js"></script>
  <script type="text/javascript" src="ruta/a/protoslideshow.js"></script>
   .
   .
 </head>

uso

Esta es la estructura que necesitamos para usar Protoslideshow:

       
 <div id="slideshow">
  <img src="ruta/a/imagen.jpg" width="xxx" height="xxx" />
 </div>

Para proporcionar las imágenes del slideshow utilizaremos una lista. En la lista cada elemento es un enlace a una imagen que se utilizará para el slideshow. En los enlaces podemos indicar el efecto de transición con el atributo 'class' al que le asignaremos el nombre del efecto: 

       
 <ul id="lista_imagenes">
  <li><a href="ruta/a/imagen1.jpg" class="efecto">imagen 1</a></li>
     .
     .
  <li><a href="ruta/a/imagenN.jpg" class="efecto">imagen N</a></li>
 </ul>

Los efectos posibles son:

  • appear
  • blinddown
  • grow
  • shrink
  • slidedown
  • slideright
  • mosaic-fade
  • mosaic-fade-first
  • mosaic-fade-last
  • mosaic-fade-center
  • mosaic-fade-firsttocenter
  • mosaic-fade-cornertop
  • mosaic-fade-cornerbottom
  • mosaic-blinddown
  • mosaic-blinddown-first
  • mosaic-blinddown-last
  • mosaic-blindright
  • mosaic-blindright-first
  • mosaic-blindright-last
  • mosaic-puff
  • mosaic-puff-first
  • mosaic-puff-last
  • mosaic-puff-center
  • mosaic-puff-firsttocenter
  • mosaic-puff-cornertop
  • mosaic-puff-cornerbottom
  • mosaic-leftright
  • mosaic-leftright-first
  • mosaic-leftright-last
  • mosaic-move
  • mosaic-move-first
  • mosaic-move-last
  • mosaic-move-center
  • mosaic-move-firsttocenter
  • mosaic-move-cornertop
  • mosaic-move-cornerbottom
  • mosaic-grow
  • mosaic-fall
  • mosaic-fall-last
Demo de los efectos

Si no se indica ningún efecto se escogerá uno aleatoriamente.

Instanciamos un objeto Protoslideshow en nuestro documento:

       
 <script type="text/javascript">
 /* <![CDATA[ */
 
  new ProtoSlideShow('slideshow', 'lista_imagenes', {duration: 0.6});
 
 /* ]]> */
 </script>

El primer argumento del constructor es el 'id' del contenedor del slideshow, el segundo es la lista con los enlaces a las imágenes que se visualizarán en el slideshow y el tercero es una lista de opciones en formato JSON (un objeto con las opciones).


opciones de configuración

En la siguiente tabla se describen las opciones de configuración de ProtoSlideShow.

opción
(tipo)
(valor por defecto) 		Descripción
afterEffect
(función)
(null)

Función a ejecutar después de mostrar una nueva imagen.
beforeEffect
(función)
(null)

Función a ejecutar antes de mostrar una nueva imagen.
duration
(flotante)
(0.5)

Duración del efecto de transición en segundos. En los efectos de mosaico se corresponde con la duración del efecto en cada pieza del mosaico.

effectInterval
(flotante)
(8)

Tiempo que transcurre entre cada imagen en segundos.
selectedClassName
(cadena)
(slideshow-selected)

Clase CSS que se le aplica al control 'jumper' seleccionado. En este caso se trata del enlace que apunta a la imagen actual.