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 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>:
Descargamos el archivo ZIP 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:
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 );REFERENCIAS:
10 comentarios:
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.
No sé cuál es el problema que tienes, tal vez si lo aclaras, podríamos intentarlo.
Está muy bien el script habrá que probarlo cuando haya tiempo ;)
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!
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?
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.
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
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.
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
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!!!
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
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 ...