JMiur [E]

Crossfader es un pequeño script que nos permite crear un elemento en nuestra web donde podemos mostrar varios contenidos que irán cambiando cada cierta cantidad de tiempo.

Descargamos el archivo ZIP que incluye el script y una página de ejemplo y luego, alojamos el script en un servidor propio como Google Pages. Debemos colocarlo en la plantilla como cualquier otro, por ejemplo, antes de <head>:
<script type="text/javascript" src="URL_archivo/Crossfader.js"></script>
Inmediatamente después de esto, agregamos algunas definiciones de estilo que son las que nos permitirán controlar la forma en que veamos el elemento:
<style type="text/css">
div.cf_wrapper { /* el contenedor externo */
position: relative;
}
div.cf_element { /* los contenedores internos */
background-color: #color; /* el color de fondo */
border:  1px solid #color; /* el color de los textos */
height: valorpx; /* la altura del elemento */
width: valorpx; /* el ancho del elemento */
}
div.cf_element div.content { /* el contenido */
padding: 10px; /* separación de los bordes */
}
/* cualquier otra propiedad especial, por ejemplo */
div.cf_element div.content h2 { ... }
div.cf_element div.content img { ... }
</style>
Para utilizarla, la estructura que debemos crear es la siguiente:
<div class="cf_wrapper">
<div class="cf_element" id="cf1">
<div class="content">
<p>El contenido del primer frame.</p>
</div>
</div>
<div class="cf_element" id="cf2">
<div class="content">
<p>El contenido del segundo frame.</p>
</div>
</div>
</div>
<script type="text/javascript">
var cf = new Crossfader( new Array('cf1','cf2'), 500, 2000 );
</script>
Esa llamada final al script es lo que hace que todo funcione:
var cf = new Crossfader( new Array('nom1','nom2'), fadeTime, delayTime);
y contienen tres variables:

un array() con los nombres (ID) de los DIVs
fadeTime tiempo que dura el fade (expresado en milisegundos)
delayTime tiempo que permanece visible (expresado en milisegundos)

Si quisiéramos colocar tres frames, bastaría agregar otra estructura:
<div class="cf_element" id="cf3">
<div class="content">
<p>El contenido.</p>
</div>
</div>
y agregar el ID correspondiente en la llamada:
var cf = new Crossfader( new Array('cf1','cf2','cf3'), 500, 2000 );

CrossFader Script

Uno
dos y tres
cuatro
cinco
seis y siete

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto.


REFERENCIAS:
  • FreakGroup
  • 10 comentarios:

    Email Urbano  

    saludos amigo, pase por aquí para saber si conoces alguien que me ayude con el diseño de mi nueva plantilla, le deje mensaje a francisco de blogandweb, pero no me ha respondido, dejame saber quien me puede ayudar en este nuevo lio que tengo...echame una manita.

    Responder
    JMiur  

    No sé cuál es el problema que tienes, tal vez si lo aclaras, podríamos intentarlo.

    Responder
    Gem@  

    Está muy bien el script habrá que probarlo cuando haya tiempo ;)

    Responder
    Ignasi  

    Hola JMiur,

    Tengo una pregunta sobre este script.

    En mi blog tengo un script en la sidebar una tira de 3 fotos de flickr que cada vez que se carga la pagina van mostrando aleatoriamente.

    Este script se le puede poner a dentro otro script?

    Así que cada x segundos solo se carge las fotos y vayan saliendo?

    Muchas gracias!

    Responder
    Ignasi  

    Hola de nuevo,

    Lo he provado y funciona!

    No exactamente como queria pero algo es algo.

    Explico:

    Con el Script de Flickr (badge) se coloca en el espacio libre del script que has descrito.

    El problema es que, en un principio el script de flickr que muestra fotos aleatoriamente cada vez que se carga, solo muestra 2 secuencias de imagenes (2 o tantas partes diferentes del crossfader) Pero no muestra aleatoriamente...

    Alguna solución?

    Responder
    JMiur  

    En principio, dentro del script puede colocarse cualquier cosa pero, claro, si es otro script las cosas se complican ya que podría haber algún tipo de interferencia entre ellos. Parece que este es el caso.

    Responder
    Email Urbano  

    holaaaa, te deje mensaje en tu email, para saber si puedes colaborarme, te deje una dirección que tiene mas 200 plantillas gratuitas. gracias por responder

    Responder
    JMiur  

    Acabo de recibirlo. No es poco lo que quieres, crear una plantilla nueva a partir de una pagina web "normal" es posible pero no es tarea sencilla.

    Veré que se puede hacer.

    Responder
    Anónimo  

    No sé por qué dejo un comentario justo acá y justo ahora, habiendo lugares más visibles y mejores horas. Supongo que me puse a leer el script y me rescaté de que nunca te agradecí por tu laburo ni te felicité. Te felicito y te agradezco, a estas horas y en este rincón.
    Un abrazo.

    ls

    Responder
    Email Urbano  

    si gracias jmiur, se que no es facil, pero de eso se trata de aprender a romperme la cabeza un poco sin conocer mucho de html,trabajo en ello, pero no es tarea facil, como bien dices, por cierto no podia comenzar a trabajar hoy sin antes mirar lo nuevo que traes, y la verdad que esta estupendo, tienes algunas cosillas sobre dibujo, esta super gracioso. gracias por tu colaboración un abrazo.FELIZ COMIENZO DE AÑO!!!

    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