Comentarios en: Carrusel de imágenes con efecto de fundido (y en menos de 2Kb) http://digitalicon.es/blog/carrusel-imagenes-efecto-fundido-2kb/ Sun, 01 Jan 2012 20:17:22 +0000 hourly 1 http://wordpress.org/?v=3.3.1 Por: Pedro http://digitalicon.es/blog/carrusel-imagenes-efecto-fundido-2kb/#comment-75 Pedro Mon, 26 Dec 2011 19:36:20 +0000 http://www.digitalicon.es/blog/?p=1605#comment-75 <p>Buenas tardes Saúl.</p> <p>He encontrado solucción a la cuestión que te planteaba.</p> <p>Sin modificar el script, se puede conseguir el efecto que deseaba cambiando en el html una línea de código.</p> <p>(Este código va en el body de la web, donde figuran los enlaces de las imágenes.)</p> <p>Sustituye la línea:</p> <p><code><ul id="diapos"></code></p> <p>Por esta otra:</p> <p><code><ul id="diapos" style="height:165px;overflow:hidden"></code></p> <p>(165 es el alto de mis imágenes de ejemplo.)</p> <p>Espero que os pueda servir a todos los que buscábais el efecto que pretendía yo.</p> <p>Gracias por tu atención y por el trabajo realizado.</p> Buenas tardes Saúl.

He encontrado solucción a la cuestión que te planteaba.

Sin modificar el script, se puede conseguir el efecto que deseaba cambiando en el html una línea de código.

(Este código va en el body de la web, donde figuran los enlaces de las imágenes.)

Sustituye la línea:

<ul id="diapos">

Por esta otra:

<ul id="diapos" style="height:165px;overflow:hidden">

(165 es el alto de mis imágenes de ejemplo.)

Espero que os pueda servir a todos los que buscábais el efecto que pretendía yo.

Gracias por tu atención y por el trabajo realizado.

]]> Por: Saúl González http://digitalicon.es/blog/carrusel-imagenes-efecto-fundido-2kb/#comment-74 Saúl González Fri, 02 Dec 2011 12:59:49 +0000 http://www.digitalicon.es/blog/?p=1605#comment-74 <p>@Pedro: Se podría reprogramar el <i lang="en" xml:lang="en">script</i> para que cargue las imágenes, cree el carrusel, y después se inserte o sustituya un elemento de la página. En cuanto saquemos tiempo lo programaremos, prometido.</p> @Pedro: Se podría reprogramar el script para que cargue las imágenes, cree el carrusel, y después se inserte o sustituya un elemento de la página. En cuanto saquemos tiempo lo programaremos, prometido.

]]> Por: Pedro http://digitalicon.es/blog/carrusel-imagenes-efecto-fundido-2kb/#comment-73 Pedro Thu, 24 Nov 2011 23:55:22 +0000 http://www.digitalicon.es/blog/?p=1605#comment-73 <p>Muchas gracias Saúl por tu aclaración y por el ejemplo que muestras.</p> <p>Perdona mi ignorancia. ¿Hay alguna manera de modificar el código del script para que las imágenes no se muestren en vertical hasta que se cargue el código totalmente?</p> <p>Aunque ya me explicas, razonablemente, que el script lo habéis realizado a propósito para que se muestren todas las imágenes en el caso de que el cliente no soporte JavaScript, en mi caso, por el diseño de las imágenes, prefiero que no se cargue el carrusel y que el cliente no lo vea, antes de que se muestren todas las imágenes en vertical y me modifique la presentación de la Web.</p> <p>Muchas gracias de nuevo. Recibe un cordial saludo.</p> Muchas gracias Saúl por tu aclaración y por el ejemplo que muestras.

Perdona mi ignorancia. ¿Hay alguna manera de modificar el código del script para que las imágenes no se muestren en vertical hasta que se cargue el código totalmente?

Aunque ya me explicas, razonablemente, que el script lo habéis realizado a propósito para que se muestren todas las imágenes en el caso de que el cliente no soporte JavaScript, en mi caso, por el diseño de las imágenes, prefiero que no se cargue el carrusel y que el cliente no lo vea, antes de que se muestren todas las imágenes en vertical y me modifique la presentación de la Web.

Muchas gracias de nuevo. Recibe un cordial saludo.

]]> Por: Saúl González http://digitalicon.es/blog/carrusel-imagenes-efecto-fundido-2kb/#comment-72 Saúl González Thu, 24 Nov 2011 10:12:46 +0000 http://www.digitalicon.es/blog/?p=1605#comment-72 <p>@Pedro: Como mencionábamos en <a href="http://www.digitalicon.es/blog/carrusel-imagenes-efecto-fundido-2kb/comment-page-2/#comentario-6188" rel="nofollow">un comentario anterior</a>, lo hemos hecho así para permitir que los usuarios reciban toda la información en caso de que su cliente no tenga soporte de JavaScript.</p> @Pedro: Como mencionábamos en un comentario anterior, lo hemos hecho así para permitir que los usuarios reciban toda la información en caso de que su cliente no tenga soporte de JavaScript.

]]> Por: Pedro http://digitalicon.es/blog/carrusel-imagenes-efecto-fundido-2kb/#comment-71 Pedro Thu, 24 Nov 2011 09:38:52 +0000 http://www.digitalicon.es/blog/?p=1605#comment-71 <p>Me parece estupendo el trabajo que habéis realizado, pero noto que al cargar la página, las imágenes aparecen en vertical una tras otras, hasta que termina de cargarse totalmente el carrusel. ¿Hay alguna forma de evitar esto?. Cuando la conesión de Internet es rápida apenas se nota este efecto, pero cuando la página tarda en cargarse se hace molesto.</p> <p>¡¡Muchas gracias por vuestro aporte!!</p> Me parece estupendo el trabajo que habéis realizado, pero noto que al cargar la página, las imágenes aparecen en vertical una tras otras, hasta que termina de cargarse totalmente el carrusel. ¿Hay alguna forma de evitar esto?. Cuando la conesión de Internet es rápida apenas se nota este efecto, pero cuando la página tarda en cargarse se hace molesto.

¡¡Muchas gracias por vuestro aporte!!

]]> Por: Saúl González http://digitalicon.es/blog/carrusel-imagenes-efecto-fundido-2kb/#comment-70 Saúl González Wed, 23 Nov 2011 08:17:31 +0000 http://www.digitalicon.es/blog/?p=1605#comment-70 <p>@Rodrigo: Sí, incluimos esa funcionalidad del contador para cumplir con la <a href="http://www.w3.org/TR/WCAG/#time-limits" hreflang="en" rel="nofollow">pauta 2.2.2 de las <abbr title="Web Content Accessibility Guidelines">WCAG</abbr>2.0</a>, que dice que hay que proporcionar un mecanismo para que el usuario pueda detener los objetos en movimiento.</p> <p>No sería difícil sustituirlo por un botón de reproducción/pausa… si logramos hacerlo en menos de 2Kb lo publicaremos. :)</p> @Rodrigo: Sí, incluimos esa funcionalidad del contador para cumplir con la pauta 2.2.2 de las WCAG2.0, que dice que hay que proporcionar un mecanismo para que el usuario pueda detener los objetos en movimiento.

No sería difícil sustituirlo por un botón de reproducción/pausa… si logramos hacerlo en menos de 2Kb lo publicaremos. :)

]]> Por: Rodrigo http://digitalicon.es/blog/carrusel-imagenes-efecto-fundido-2kb/#comment-69 Rodrigo Fri, 18 Nov 2011 10:42:59 +0000 http://www.digitalicon.es/blog/?p=1605#comment-69 <p>Impresionante.</p> <p>He visto que al hacer clic en un contador la animación se para, por lo menos cuando yo lo he implementado.</p> <p>¿Sería muy dificil que la animación continuara y añadir un botón de pausa y play?.</p> <p>Gracias.</p> Impresionante.

He visto que al hacer clic en un contador la animación se para, por lo menos cuando yo lo he implementado.

¿Sería muy dificil que la animación continuara y añadir un botón de pausa y play?.

Gracias.

]]> Por: Jorge http://digitalicon.es/blog/carrusel-imagenes-efecto-fundido-2kb/#comment-68 Jorge Sun, 13 Nov 2011 17:36:22 +0000 http://www.digitalicon.es/blog/?p=1605#comment-68 Gracias, eso es. Gracias, eso es.

]]> Por: Saúl González http://digitalicon.es/blog/carrusel-imagenes-efecto-fundido-2kb/#comment-67 Saúl González Thu, 20 Oct 2011 14:11:45 +0000 http://www.digitalicon.es/blog/?p=1605#comment-67 <p>@Jorge: No estoy seguro de a qué te refieres exactamente, pero voy a intentar contestar.</p> <p>Si te refieres al tiempo que transcurre entre el fundido de una imagen y la siguiente, se controla por medio de la variable <var>t</var>, que inicialmente definimos con un valor de tres segundos —<code>t: 3000</code>—. Ese es el tiempo que una imagen es visible desde que acaba el fundido hasta que comienza de nuevo.</p> <p>Si te refieres al tiempo que dura la transición —es decir, la duración del efecto de fundido en sí—, no tenemos una variable definida específicamente, pero puedes modificar el tiempo del <code>setInterval()</code> de la función <code>fun()</code>; ahora está establecido a <code>50</code> —justo antes del cierre de la función—: valores mayores ralentizarán el efecto.</p> <p>Espero haberte resuelto la duda.</p> @Jorge: No estoy seguro de a qué te refieres exactamente, pero voy a intentar contestar.

Si te refieres al tiempo que transcurre entre el fundido de una imagen y la siguiente, se controla por medio de la variable t, que inicialmente definimos con un valor de tres segundos —t: 3000—. Ese es el tiempo que una imagen es visible desde que acaba el fundido hasta que comienza de nuevo.

Si te refieres al tiempo que dura la transición —es decir, la duración del efecto de fundido en sí—, no tenemos una variable definida específicamente, pero puedes modificar el tiempo del setInterval() de la función fun(); ahora está establecido a 50 —justo antes del cierre de la función—: valores mayores ralentizarán el efecto.

Espero haberte resuelto la duda.

]]> Por: Jorge http://digitalicon.es/blog/carrusel-imagenes-efecto-fundido-2kb/#comment-66 Jorge Wed, 19 Oct 2011 12:16:40 +0000 http://www.digitalicon.es/blog/?p=1605#comment-66 Hola de nuevo, tengo una duda: ¿si quisera hacer que el encadenado fuese mas lento se podria poner una variable para controlar esta acción? Gracias. Hola de nuevo, tengo una duda: ¿si quisera hacer que el encadenado fuese mas lento se podria poner una variable para controlar esta acción?
Gracias.

]]>