25 de Noviembre de 2017
Jun
15

Galerias con cycle (documentación)

Categorías: , , ,

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:



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:

 

5
Valoración media: 5 (5 votos)

27 Comentarios:

Creo que lo he

Creo que lo he entendido...todo sea que me ponga y en vez salirme lo que tengo pensado, me salga una bombas o algo así X-D

Tremendo markus, estoy segura que la gente le va a sacar muuuucho partido. 

:)

Gracias Markus .... después intentare que funcioone.

Esta entrada ya está muy cargada en ejemplos.

@Arckanoid: te he borrado el código. Por favor, haz las pruebas en tu propio blog, que aquí con tantos ejemplos, ya está costando mucho cargar la página. Very Surprised

Excelente trabajo :). Ahora

Excelente trabajo :). Ahora a ver cuanto tardo en pillarlo xD.

Buena implementación,

Buena implementación, aunque si es cierto que carga mucho la página, noto como va más lento.

Un saludo.

Jooooooooo, que pasaadaaaaa!!!

Dios, como te lo curras!!!

Si es que nos estás malcriando... ¡Lo de la galería del concurso de blogs ha quedado de muerte!

MmMm Interesante! :p

Markus que opción es las que has escogido para insertar esto en el bloque de blogs? que salen todos los del concurso?

@The_unforgiven_too, KoNiKo:

@The_unforgiven_too: Sí que se nota cargada, pero es que en esta entrada, con la cantidad de ejemplos que tiene... aparte que tarda en cargar la página, va todo más lento debido a que cada galería está ejecutando temporizadores para controlar los efectos especiales de cada ejemplo. Digamos que no se debería abusar, y poner un máximo de 2 o 3 galerías cycle por página.

@KoNiKo: He utilizado el método explicado en el segundo ejemplo de esta entrada. Los elementos de la galería los he puesto a mano. Lo único que tiene de especial, es que genero un código fx diferente cada vez que se recarga la página, lo cual me sirve de ejemplo ahora que ponemos este tipo de galerías en marcha, aunque hay algunos efectos con los que no se ve muy bien. Esto lo tendréis que probar vosotros, a ver qué efecto os va mejor en cada caso.

@RikkuInTheMiddle: jeje Smile

Por cierto, esto lo podréis utilizar tanto en textos de entradas de blog, como en bloques de texto libre, lo cual os puede servir para ahorrar algo de espacio. Por ejemplo, si dentro de las opciones que se especifican dentro de cycle="..." se utiliza timeout=10000;click=1 entonces la galería está casi quieta (cambia de elemento cada 10 segundos), pero se puede pasar al siguiente elemento haciendo click con el ratón.

Muy chulo :P Está genial :D

Muy chulo :P Está genial :D

Pues a ver quien se anima a utilizar esto...

...que deje un enlace a su entrada donde lo use, y así vamos viendo qué cosillas se os van ocurriendo. Smile

Yo tengo algo en mente...

A ver si lo hago y te lo digo markus. Mañana intentaré hacerlo Very Happy

markus tengo una duda con

markus tengo una duda con esto, estoy haciendo en un bloque lateral una galería así, el caso es que las imagen es demasiado grande, cuando intento redimensionarla con los parámetros widht y height me salen como imagenes independientes no como galeria, y a todas les pongo el mismo tamaño. A ver si me puedes ayudar...ainmssss

¡Ah! también lo he intentado poniendo a cada imagen su tamaño original, y me ocurre lo mismo, imagenes independientes una debajo de otra :S 

@Shaiyia, si puedes, pásame el código

...aquí mismo o por MP, como prefieras. Es que si no lo veo, es dificil de tener una idea del problema concreto.

Ahora te mando un mp :)

Ahora te mando un mp :)

¡¡Creo que ya se donde

¡¡Creo que ya se donde está el problema! A ver, en principio cambiaba width y height de lo que es el central, pero el de arriba del todo lo dejaba igual ¿podria ser eso?

Te pongo como lo tengo ahora, que todavía necesita modificación, pero al menos no me salen separadas ni enormes :D

<div align="center">
<div class="cycle">
<div class="box10" align="center">
<img src="http://i12.photobucket.com/albums/a202/Shaiyia/Blog/19. gif" width="28" height="63" />
<br />
(<a href="ihttp://zonaforo.meristation.com/foros/viewtopic.php?t =1006118">Resident Evil: Kidik Chronicles</a>)
</div>
<div class="box10" align="center">
<img src="http://i12.photobucket.com/albums/a202/Shaiyia/Blog/8.g if" width="48" height="64" />
<br />
(<a href="ihttp://zonaforo.meristation.com/foros/viewtopic.php?t =994844">La ira del destino: El fin de la humanidad</a>)
</div>
<div class="box10" align="center">
<img src="http://i12.photobucket.com/albums/a202/Shaiyia/Blog/13. gif" width="50" height="64" />
<br />
(<a href="http://zonaforo.meristation.com/foros/viewtopic.php?t= 1021188">KOTOR 2: With bad mil parody</a>)
</div>
<div class="box10" align="center">
<img src="http://i12.photobucket.com/albums/a202/Shaiyia/Blog/12. gif" width="41" height="64" />
<br />
(<a href="/rikkuinthemiddle/07-03-2008/2128/cronologia-y-persona jes-de-la-saga-silent-hill">Cronología y personajes de la saga Silent Hill</a>)
</div>
<div class="box10" align="center">
<img src="http://i12.photobucket.com/albums/a202/Shaiyia/Blog/6.g if" width="38" height="64" />
<br />
(<a href="ihttp://blogs.gamefilia.com/maqy/12-03-2008/2332/una-h istoria-entre-todos">Piedra de Luna: Un relato entre todos</a>)
</div>
<div class="box10" align="center">
<img src="http://i12.photobucket.com/albums/a202/Shaiyia/Blog/5.g if" width="38" height="64" />
<br />
(<a href="/lester-knight/24-04-2008/4943/el-baron-negro-edicion- especial-completa-revisada-y-descargable-relato">El Barón Negro</a>)
</div>
<div class="box10" align="center">
<img src="http://i12.photobucket.com/albums/a202/Shaiyia/Blog/15. gif" width="52" height="64" />
<br />
(<a href="/lester-knight/21-04-2008/4663/meri-relatos-los-viejos -tiempos-parte-1-autor-the-unforgiven-too-relat">Los viejos tiempos</a>)
</div>
<div class="box10" align="center">
<img src="http://i12.photobucket.com/albums/a202/Shaiyia/3.gif" width="19" height="60" />
<br />
(<a href="/rapsodos/20-05-2008/6842/diario-de-snake">Diario de Snake</a>)
</div>
</div>
</div>

Por lo que he visto creo que ese era el problema, porque ya no me sale, pero ahora la galeria se me apelotona a la derecha, supongo que será por la diferencia de tamaños, está comprobado que no valgo para esto X-D

@Shaiyia, sobre los parámetros del cycle

El problema es que cuando hay texto en los elementos de la galería, con algunos efectos especiales ocurren deplazamientos raros... también he observado problemillas cuando las imágenes que se utilizan no tienen el mismo tamaño. Es cuestión de ir probando varios efectos y usar aquel que mejor te resulte en cada caso.

Aquí te propongo empezar por estos parámetros:

<div class="cycle" cycle="fx=fade;width=200;height=125">

El efecto especial fade sólo cambia la opacidad de los elementos. Al no variar dinámicamente el tamaño, como ocurre con otros efectos especiales, es más facil de usar. Te puede venir bien para acabar de ajustar los parámetros width y height (dimensiones de la galería). Luego, ya puedes ir probando con otros efectos hasta que encuentres otro que se ajuste sin montar estropicios, y que te guste más, claro.

Muchas gracias markus, voy a

Muchas gracias markus, voy a ver si lo arreglo :)

Edito: Con lo que me has puesto ha quedado perfecta, ahora puedo aligerar la carga del bloque, muchas gracias otra vez :) 

@Shai, te ha quedado que ni pintao :-)

La verdad es que si los elementos de la galería no tienen las mismas dimensiones la cosa se complica un pelín, pero poco a poco van saliendo truquillos para todo. Smile

Estoy teniendo un problema

Estoy teniendo un problema en mi última entrada de blog. Al principio se ve la galería cycle perfectamente, pero en cuanto recargo la página ya no se ven.

Además, cuando le doy a editar, resulta que se ha comido parte de las características del cycle.

Debería ser así:

<div align="center">
<div class="cycle" cycle="fx=fade;width=337;height=557">
<img src="http://i183.photobucket.com/albums/x53/The_unforgiven_j uegos/1-baja.jpg" width="287" height="460" />
<img src="http://i183.photobucket.com/albums/x53/The_unforgiven_j uegos/1-alta.jpg" width="337" height="557" />
</div>
</div>

 

Y me sale:

<div align="center">
<div class="cycle">
<img src="http://i183.photobucket.com/albums/x53/The_unforgiven_j uegos/1-baja.jpg" width="287" height="460" />
<img src="http://i183.photobucket.com/albums/x53/The_unforgiven_j uegos/1-alta.jpg" width="337" height="557" />
</div>
</div>

 

Un saludo.

Probando...

¿cómo lo ves aquí?

<div align="center">
<div class="cycle" cycle="fx=fade;width=390;height=292">
<img src="http://i183.photobucket.com/albums/x53/The_unforgiven_j uegos/solace-23.jpg" width="390" height="292" />
<img src="http://i183.photobucket.com/albums/x53/The_unforgiven_j uegos/solace-34.jpg" width="390" height="292" />
</div>
</div>

El problema que te desaparezca el atributo con los parámetros del cycle se debe a que el editor WYSIWYG se lo come con patatas. Tendrías que desactivar el editor ese para poder editar el HTML manualmente.

Parece que ya lo ve todo el

Parece que ya lo ve todo el mundo. Es raro, porque yo si recargo la página no se ve. Cuando pueda lo probaré en Windows y con otro navegador. Gracias.

Tengo el mismo problema que the_unforgiven_too

He puesto una galería con cycle, pero la primera vez que carga la página se ve bien, pero a la que vuelves a entrar da fallo y se ve en blanco todo. El código lo he comprobado y es correcto, pero cada vez que le das a editar, el wys como se llame se carga el código original, que es este:

<div align="center">
  <div class="cycle" cycle="fx=fade;width=400;height=223">
    <img src="http://i494.photobucket.com/albums/rr305/RaccoonHill/th oriana_mini.jpg" width="400" height="223" alt="" />
    <img src="http://i494.photobucket.com/albums/rr305/RaccoonHill/vo lus2_mini.jpg" width="400" height="223" alt="" />
<img src="http://i494.photobucket.com/albums/rr305/RaccoonHill/wr ex_mini.jpg" width="400" height="223" alt="" />
<img src="http://i494.photobucket.com/albums/rr305/RaccoonHill/ma ss_effect_15_mini.jpg" width="400" height="223" alt="" />
<img src="http://i494.photobucket.com/albums/rr305/RaccoonHill/na v_map_mini.jpg" width="400" height="223" alt="" />
<img src="http://i494.photobucket.com/albums/rr305/RaccoonHill/ni hlus_mini.jpg" width="400" height="223" alt="" />
<img src="http://i494.photobucket.com/albums/rr305/RaccoonHill/no rmandy2_mini.jpg" width="400" height="223" alt="" />
<img src="http://i494.photobucket.com/albums/rr305/RaccoonHill/no rmandy_mini.jpg" width="400" height="223" alt="" />
<img src="http://i494.photobucket.com/albums/rr305/RaccoonHill/re le_masa_mini.jpg" width="400" height="223" alt="" />
<img src="http://i494.photobucket.com/albums/rr305/RaccoonHill/sa larianos_mini.jpg" width="400" height="223" alt="" />
<img src="http://i494.photobucket.com/albums/rr305/RaccoonHill/sa ren_benezia_mini.jpg" width="400" height="223" alt="" />
<img src="http://i494.photobucket.com/albums/rr305/RaccoonHill/sh epard_2.jpg" width="400" height="223" alt="" />
<img src="http://i494.photobucket.com/albums/rr305/RaccoonHill/ma ss_effect_14_mini.jpg" width="400" height="223" alt="" />
<img src="http://i494.photobucket.com/albums/rr305/RaccoonHill/ma ss_effect_7_mini.jpg" width="400" height="223" alt="" />
<img src="http://i494.photobucket.com/albums/rr305/RaccoonHill/ga rrus2_mini.jpg" width="400" height="223" alt="" />
<img src="http://i494.photobucket.com/albums/rr305/RaccoonHill/ge th_mini.jpg" width="400" height="223" alt="" />
<img src="http://i494.photobucket.com/albums/rr305/RaccoonHill/ta li_mini.jpg" width="400" height="223" alt="" />
<img src="http://i494.photobucket.com/albums/rr305/RaccoonHill/li ara_mini.jpg" width="400" height="223" alt="" />
<img src="http://i494.photobucket.com/albums/rr305/RaccoonHill/ac echador_geth_mini.jpg" width="400" height="223" alt="" />
<img src="http://i494.photobucket.com/albums/rr305/RaccoonHill/as hley_mini.jpg" width="400" height="223" alt="" />
<img src="http://i494.photobucket.com/albums/rr305/RaccoonHill/ba tarianos2_mini.jpg" width="400" height="223" alt="" />
<img src="http://i494.photobucket.com/albums/rr305/RaccoonHill/ba tarianos_mini.jpg" width="400" height="223" alt="" />
<img src="http://i494.photobucket.com/albums/rr305/RaccoonHill/be nezia_mini.jpg" width="400" height="223" alt="" />
<img src="http://i494.photobucket.com/albums/rr305/RaccoonHill/cl on_asari_Shiala_mini.jpg" width="400" height="223" alt="" />
<img src="http://i494.photobucket.com/albums/rr305/RaccoonHill/co loso_geth_mini.jpg" width="400" height="223" alt="" />
<img src="http://i494.photobucket.com/albums/rr305/RaccoonHill/co nsejo.jpg" width="400" height="223" alt="" />
<img src="http://i494.photobucket.com/albums/rr305/RaccoonHill/el cor_mini.jpg" width="400" height="223" alt="" />
  </div>
</div>

La entrada es esta:

http://blogs.gamefilia.com/rikkuinthemiddle/29-10-2008/15149  /mass-effect-el-universo-a-nuestros-pies

Creo que he dado con la causa, a ver si ahora funciona...

Buenas, y disculpad que me retrase con estas cosillas. Creo que he dado con la causa, y he aplicado un pequeño cambio. ¿funciona ahora?

¡Si!

¡Si! Ya funciona. No sé que le has hecho pero ya va bien, y también recarga la pagina correctamente.

La verdad es que he tenido problemas desde ayer con la entrada, por pies de foto que hacían lo que les daba la gana, el goear que no se me oia en casa, y luego lo del cycle.

Ya explicarás que truco has utilizado Kitten.

Wooo, tenemos entre

Wooo, tenemos entre nosostros a dos personas capaces de usar el CoDiGo SeCrEtO capaz de hacer que las imagenes cambien...

Avisadme cuando seais capaces de lanzar bolas de fuego o de invocar seres extraños ;) Que ahi estaré yo para copiar lo que digais y aprenderlo.

Un saludo.

Ugh! Es un poco complicado...

Bueno, primero comentar que me alegro que funcione. :)

Y el cómo... es un poquitín complicado de explicar, pero bueno, ahí va... pues resulta que hace algún tiempo implementé un sistema de cache aquí en los blogs, un tanto especial, que permite optimizar las páginas que se generan para usuarios identificados (para anónimos ya había cache). Y eso hace que se tenga que ir con cuidadín con el sincronismo entre lo que contiene la página y los componentes javascript que se necesitan para que funcione. Si miras el código fuente de las páginas, verás que el javascript está también compactado en uno o dos ficheros .js con nombres raros, y eso es porque el sistema va generando versiones distintas de javascripts empaquetados según se necesitan. Cargar así el javascript va mucho más rápido (ocupa menos y hay menos ficheros, por lo que el navegador no necesita abrir tantas conexiones para completar la carga de página). Total, que el sincronismo entre el cache de páginas y el de los javascripts no estaba bien resuelto del todo para algunos casos, como éste del cycle. He tocado una cosilla para ver si con eso mejoraba la cosa... y el resto ya lo sabes. :)

Problema con un código

Markus, he intentado poner un código con esta clase de galería, pero no funciona. He expuesto la duda completa en Meristation, en el FCS, en este mensaje. Ojalá puedas atender mi duda pronto.

Saludos,
Desmodius.