JMiur [E]

ProtoFlow es un script que muestra imágenes con un efecto muy original y si bien no es aplicable para cualquier cosa, no deja de ser divertido y bastante sencillo de utilizar.

Utiliza las librerías Prototype y Scriptaculous así que debemos tener ambas agregadas en nuestra plantilla (más información).

La última versión podemos descargarla en formato ZIP desde la misma web y allí encontraremos todas las librerías necesarias además de algunos ejemplos y abundante documentación. En realidad, de todo eso sólo necesitamos algunos archivos así que este otro ZIP contiene sólo lo mínimo necesario para implementar el efecto (las dos imágenes necesarias ya están alojadas en ImageShack)

Necesitamos agregar dos scripts: reflection.js y protoFlow.js. Lo hacemos como siempre, antes de </head>:
<script src="URL_reflection.js" type="text/javascript"></script>
<script src="URL_protoFlow.js" type="text/javascript"></script>
A continuación de esto, la hoja de estilo que podemos cargar desde un archivo externo o bien copiar y pegar el contenido dentro de etiquetas STYLE:
<link href="URL_protoFlow.css" rel="stylesheet" type="text/css" />
Por último, agregamos lo siguiente para que todo se ejecute recién cuando la página está cargada por completo y con eso, evitamos problemas:
<script type='text/javascript'>
//<![CDATA[
Event.observe(window, 'load', function() {
cf = new ProtoFlow($("protoflow"), {
captions: true,
useReflection: true,
enableOnClickScroll: true
});
});
// ]]>
</script>
Listo. Ahora ya podemos utilizar el efecto en cualquier post agregando algo similar a esto:
<div id="protoflow">
<a href="#"><img src="URL_imagen1" alt="Titulo 1"/></a>
<a href="#"><img src="URL_imagen2" alt="Titulo 2"/></a>
<a href="#"><img src="URL_imagen3" alt="Titulo 3"/></a>
<a href="#"><img src="URL_imagen4" alt="Titulo 4"/></a>
</div>
Como se ve, sólo son enlaces con una imagen donde el atributo ALT será el texto optativo que veremos debajo de cada una.

Las definiciones CSS son muy sencillas y no hay mucho que configurar:
#protoflow { /* es el alto total (más o menos cuatro veces la altura de las imágenes */
height: 400px;
width: auto;
}
.sliderTrack { /* el slider */
background: transparent url('URL_trackfillleft.png') no-repeat left top;
height: 15px;
position: relative;
text-align: left;
width: 137px;
}
.sliderHandle { /* el control del slider */
background: transparent url('URL_knob.png') no-repeat left top;
cursor: pointer;
height: 16px;
margin-left: -2px;
position: absolute;
top: -5px;
width: 16px;
}
.protoCaptions { /* el área de textos inferior */
display: none;
}
.captionHolder { /* el texto */
color: black;
font-size: 34px;
}

La primera imagenLa imagen 2Puede usarse el slidero usarse el mouseo usarse el tecladoLa imagen 6La imagen 7La última imagen

16 comentarios:

SäNTÿ  

Vaya, es bastante interesante el efecto. Aunque creo que es un poco lento o debería desplazarse mas suavemente. no te parece :S?

De igual manera me será útil. xD

Responder
Graciela de Palomas  

Guau :D hoy estamos de arte, efectos...algún día investigaré lo de Proto y Srip...buen día!!!

Responder
Gem@  

Es divertido y una buena idea para presentar walpapers :)

Responder
Felipe  

que pena amigo, no se mucho del tema... estoy aprendiendo¡¡¡ ¿en que parte de la plantilla coloco el css, o donde va ese código?

Responder
Zona Safari TV  

Buenísimo. Cada vez aparecen mejores cosas para reemplazar al Flash.
Saludos.

Responder
perloblog  

Está genial, JMiur, me tardó un poquito en cargar, pero despues anda de diez :D Saludos!

PD.: Borraste el comentario de "sandris" por moderar o por ocultar algo?? :P

Responder
Espineli  

Que pasada el efecto está que se sale, para mostrar imagenes pequeñas como iconos o miniaturas esta muy bien ;)
Saludos figura!! :D

Responder
JMiur  

Es un efecto interesante y sencillo para miniaturas. Divertido :D

Felipe: El código CSS va antes de </b:skin>

Perloblog: El comentario de Sandris lo borró el autor.

Responder
Tigremen  

Hola Jmiur una pregunta, que tantas imagenes/enlaces se les puede agregar. Lo quiero poner como el el carrousel de ZIMAG REMEDY que trae en la parte de arriba.

No se me pondra lento el blog?

Gracias por el apoyo con el DIV mal colocado.

Responder
Daniel  

Muy bueno, es similar al efecto cover view del itunes o del Leopard...gracias, hay que probarlo...

Responder
JMiur  

Tigremen:
No tiene limitaciones. Imagino que la limitación antural es que en cierto ancho quedan visibles una cierta cantidad y poniendo muchas, pierde la gracia.

Responder
Borjamari  

Muy bueno.

Responder
Juan  

lo implementé en mi blog pero al darle click no carga la url que le puse :( , no se como hacer que funcione.

Responder
JMiur  

No, los enlaces no cargan URLs, si te fijas en el sitio original,verás que nada dice de eso. Sólo es una galería.

Responder
Paula  

EN el blog de prueba copié esta entrada para ver si funcionaba (las mismas imágenes) y todo salió bien, pero cuando intenté cambiar el CSS en vez de:
.captionHolder { /* el texto */
color: black;
font-size: 34px;
}
por lo siguiente:
.captionHolder { /* el texto */
color: #F5F5F5;
font-size: 16px;
}
los cambios no surtieron efecto, ¿en qué me habré equivocado?

Responder
JMiur  

Creo habertelo contestado por mail pero igual lo repito. Lo que ocurre en ese ejemplo es que el color de fondo que usas es el mismo que el color de fondo de los textos y por eso no los ves.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR