<?='Hello, world!'?>

Bueno, pues después de lidiar con algunos problemas de compatibilidad de varios tipos, ya tenemos aquí la posibilidad de generar galerías de imágenes cíclicas. Este método es compatible con todos los navegadores más habituales. Para aquellos que tengais curiosidad, esto se implementa con el plugin cycle de jQuery, que es la librería básica de javascript que utilizamos en este entorno.

Este sistema de galerías nos permite rotar una serie de imágenes, o de cualquier clase de contenido. Todo depende de algunos detalles que tenemos que introducir en el HTML de nuestros textos. Para poder escribir los códigos que activan las galerías es necesario desactivar el editor de texto enriquecido (WYSIWYG) y utilizar una sintaxis particular que ahora os explico.

Para generar galerías de imágenes utilizaremos el siguiente formato de código:

<div class="cycle" cycle="opciones de la galería">
 <img src="..." width="x" height="x" title="" />
 <img src="..." width="x" height="x" title="" />
 <img src="..." width="x" height="x" title="" />
 <img src="..." width="x" height="x" title="" />
</div>

Para generar rotaciones de cualquier otro tipo de contenido utilizaremos el siguiente formato de código:

<div class="cycle" cycle="opciones de la galería">
 <div>...aquí nuestro contenido...</div>
 <div>...aquí nuestro contenido...</div>
 <div>...aquí nuestro contenido...</div>
 <div>...aquí nuestro contenido...</div>
</div>

Es decir, tenemos un div normal y corriente al cual le añadimos un par de atributos. El primero, class="cycle", es el que activa este tipo de galerías, y el segundo, cycle="opciones de la galería", es el que nos permite especificar sus parámetros de configuración, algunos de los cuales son obligatorios y otros opcionales.

Si nos fijamos, la estructura es muy parecida en los dos casos. En el primero, el div con el atributo class="cycle" contiene imágenes, y en el segundo caso contiene otros elementos div. La idea es que con este método de galerías se va a rotar cíclicamente todo elemento contenido en el div principal.

La ventaja con el primer método es que es más sencillo, y suficiente si lo que queremos es mostrar algunas imágenes. El segundo método es más complicado, como veremos más adelante.

Una variante sobre el primer ejemplo (sin div) podría ser como lo siguiente, donde los elementos de la galería no son div, ni img, sino a, que desde el punto de vista de la estructura del HTML viene a ser similar al primer ejemplo, pero donde las imágenes son a su vez un enlace.

<div class="cycle" cycle="opciones de la galería">
 <a href="..."><img src="..." ... /></a>
 <a href="..."><img src="..." ... /></a>
 <a href="..."><img src="..." ... /></a>
 <a href="..."><img src="..." ... /></a>
</div>

Veamos, de momento, un ejemplo con cada uno:

(Pulsa aquí para ampliar la imagen)

(Pulsa aquí para ampliar la imagen)

(Pulsa aquí para ampliar la imagen)

(Pulsa aquí para ampliar la imagen)

El código utilizado en el primer ejemplo es:

<div align="center">
  <div class="cycle" cycle="fx=scrollLeft;width=250;height=185">
    <img src="miniaura1.jpg" width="250" height="185" alt="" />
    <img src="miniaura2.jpg" width="250" height="185" alt="" />
    <img src="miniaura3.jpg" width="250" height="185" alt="" />
    <img src="miniaura4.jpg" width="250" height="185" alt="" />
  </div>
</div>

El primer div nos permite centrar la galería, lo cual es totalmente opcional. En el segundo es donde especificamos class="cycle" y el resto de parámetros con el atributo cycle="...". Luego ya repasaremos todas las opciones que se pueden utilizar, pero aquí se ven los más importantes. fx nos permite especificar qué tipo de efectos especiales queremos que se apliquen para las transiciones de las imágenes que componen nuestra galería de ejemplo. Las opciones width y height son muy importantes ya que definen el espacio que ocupará la galería, y conviene que se calcule en base al tamaño de las imágenes. En este caso, definimos una galería de 250x185 que va a contener imágenes de ese mismo tamaño, pero esto podría no ser así, dependerá de lo que necesitemos en cada momento.

El código utilizado en el segundo ejemplo es:

<div align="center">
  <div class="cycle" cycle="fx=scrollRight;width=270;height=220">
    <div class="box10" align="center">
      <img src="miniatura1.jpg" width="250" height="185" alt="" />
      <br />
      (<a href="imagen1.jpg">Pulsa aquí para ampliar la imagen</a>)
    </div>
    <div class="box10" align="center">
      <img src="miniatura2.jpg" width="250" height="185" alt="" />
      <br />
      (<a href="imagen2.jpg">Pulsa aquí para ampliar la imagen</a>)
    </div>
    <div class="box10" align="center">
      <img src="miniatura3.jpg" width="250" height="185" alt="" />
      <br />
      (<a href="imagen3.jpg">Pulsa aquí para ampliar la imagen</a>)
    </div>
    <div class="box10" align="center">
      <img src="miniatura4.jpg" width="250" height="185" alt="" />
      <br />
      (<a href="imagen4.jpg">Pulsa aquí para ampliar la imagen</a>)
    </div>
  </div>
</div>

Si observamos en el código de este segundo ejemplo, los dos primeros div son prácticamente iguales al primero. Pero fijémosos en los parámetros width y height. Aquí tienen valores algo mayores que nuestras imágenes. Esto es así porque los elementos que componen esta galería contienen algo más que una imagen (ver la parte gris del código, que va dentro de otros div).

En estos div que conforman los elementos de nuestra galería podemos utilizar las clases CSS box10 (como es el caso del ejemplo), o box20, que es igual, pero que genera algo más de margen. Por lo demás, el contenido de estos div puede ser cualquier cosa. Lo que tenemos que tener en cuenta es el tamaño que van a tener para poder definir correctamente los parámetros width y height del div que tiene la clase class="cycle". En caso contrario, si el espacio que calculamos para la galería es menor del necesario, ésta se mostrará recortada, y si es mayor, entonces vamos a generar espacio en blanco sin necesidad alguna.

Bien, hasta aquí la estructura del HTML que necesitamos montar para nuestras galerías. Ahora centrémonos en la sintaxis del atributo cycle="...". Las opciones se separan con punto y coma unas de las otras, y tienen el formato opción=valor.

Las opciones disponibles son:

• fx: Especifica el tipo de efectos especiales que se quiere aplicar para las transiciones de los elementos de la galería (valor predeterminado: fade). Un poco más abajo tenéis una muestra de cada uno de los efectos que se puede utilizar.
• width/height: Especifica las dimensiones en pixels para el espacio destinado a mostrar elementos de la galería. Estos dos parámetros son imprescindibles. Son los únicos que no tienen un valor predeterminado y que el sistema tampoco puede calcular. Si no se especifican, entonces la galería no va a activarse.
• random: Se puede utilizar el valor 1 para que los elementos de la galería se muestren aleatoriamente. En caso contrario se muestran en el mismo orden en el que estan en el HTML.
• speed: Especifica un valor en milisegundos. Es el tiempo que se tardará en aplicar las transiciones. El valor predeterminado es 1000 milisegundos (1 segundo).
• timeout: Especifica un valor en milisegundos. Es el tiempo que se mantendrá visible cada elemento de la galería. El valor predeterminado es 6000 milisegundos (6 segundos).
• delay: Especifica un valor en milisegundos. Es el tiempo que se tardará en iniciar la rotación de elementos de la galería. El valor predeterminado es 0, lo cual implica que las transiciones se inician justo cuando se carga la página. Aquí se pueden especificar valores positivos o negativos. Este parámetro va bien si se quieren mostrar varias galerías en la misma página con ritmos distintos para las transiciones.
• pause: Se pueden especificar los valores 0 y 1 (predeterminado). Permita pausar las transiciones situando el cursor encima de la galería. Si se quiere desactivar este efecto, entonces conviene utilizar el valor 0.
• click: Si se especifica el valor 1, entonces se puede pasar al siguiente elemento de la galería haciendo click sobre la misma. El valor predeterminado es 0, es decir, esta característica está desactivada.

Para finalizar, aquí tenéis una muestra de todos los efectos especiales que se pueden utilizar con el parámetro fx:

• Galerias con cycle (ejemplos de efectos especiales)

Compartir

Barrapunto Blinklist BlogMemes Delicious Digg Facebook Favoriting Fresqui Furl Google Icerocket Ma.gnolia.com Menéame Newsvine Propeller Reddit StumbleUpon Technorati Webéame Yahoo