Micaela 9 de agosto de 2008 a las 11.15
   Imprimir artículo
elWebmaster.com

Script para rotar contenido de forma atrayente


Si queremos destacar algo en nuestra web o blog -ya sean artículos, publicidades, o cualquier tipo de contenido- la librería Javascript Crossfader.js nos puede llegar a ayudar mucho en esta tarea.
¿En qué consiste? Nos permite mostrar de forma dinámica contenido que irá rotando cada cierta cantidad de segundos.

Lo bueno de esta herramienta es que nos permite agregar cualquier tipo de información, ya que lo que va rotando son divs definidos por nosotros mismos como deseemos.
De esta forma podremos usar, por ejemplo, imágenes, texto o cualquier cosa que se pueda incluir en la web. Incluso podremos mezclar todas estas cosas.

Para instalarla no hace falta más que descargar el script (pueden hacerlo desde aquí) y copiar el siguiente código dentro de nuestra etiqueta head:

JavaScript:
<script type="text/javascript" src="js/bsn.Crossfader.js"></script>
Nuestro CSS debería lucir así:
<style type="text/css">
div.cf_wrapper
{
position: relative;
}
div.cf_element
{
width: 400px;
height: 250px;
background-color: #eee;
border: 1px solid #ccc;
}
div.cf_element div.content
{
padding: 10px;
}
div.cf_element div.content h3
{
padding-top: 0;
margin-top: 0;
}
</style>

Luego de esto hay que definir el código HTML de la siguiente manera:

<div class="cf_wrapper">

<div class="cf_element" id="cf1">
<div class="content">
<h3>Titulo 1</h3>
<p> aquí todo nuestro contenido correspondiente al bloque 1 </p>
</div>
</div>

<div class="cf_element" id="cf2">
<div class="content">
<h3> Titulo 2</h3>
<p> Aquí todo nuestro contenido correspondiente al bloque 2 </p>
</div>
</div>

</div>

¿Qué es esto? Sencillamente cada bloque de clase cf_element representará uno de las pantallas que aparecerán. Si deseáramos más de dos pantallas tan sólo deberíamos copiar y pegar todo cf2 y cambiarle el id por cf3 o lo que queramos.

Por último debemos agregar la siguiente línea de código Javascript:

<script type="text/javascript">
var cf = new Crossfader( new Array('cf1','cf2'), 500, 2000 );
</script>

Con esta línea inicializamos el script. Donde dice new Array(‘cf1′,’cf2’) debemos agregar todos los divs que usemos. Si por ejemplo hubiéramos hecho 3 y le hubiéramos puesto de id cf3 quedaría new Array(‘cf1′,’cf2′,’cf3’).

Espero que lo pongan en práctica porque es una forma simple pero eficaz de crear un cuadro de contenidos que llame la atención en nuestra web.

Fuente: Xyberneticos


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (13)

  1. Victor dice:

    Podrías poner un ejemplo para verlo en acción..

  2. Pablo dice:

    Excelente!!! Ya lo estoy por poner es practica, mucho busque algo asi, gracias nuevamente.

  3. Pablo dice:

    Acabo de implementar el script en una pagina de prieba y funciona correctamnete, ahora cuando lo quice implementar en una pagina ya diseñada me encontre con el problema de que no funciona bajo firefox, minetras que en internet explorer no tiene problema. No puedo encontrar porque no funciona, quizas con tu experiencia me puedas ayudar, te lo agradezco de antemano.

    Un saludo.

  4. Williams Molina dice:

    Esta buenisimo el script, gracias por compartirlo

    Saludos

  5. Wagner dice:

    Bajo firefox funciona perfectamente, los estoy probando en ubuntu.

    Gracias por el script.

  6. Norberto Betho dice:

    Como Victor (arriba), serìa interesante (para los novatos como yo) que incluyeran un ejemplo (pequeño al fin)para apreciar el funcionamiento. De todos modos, bàrbaro, es lo que buscaba hace mucho tiempo.

  7. Dario Vera dice:

    Buen codigo, me soluciono un inconveniente para quitarle la simplicidad a unas noticias que publicaba, sigan adelante

  8. Esteban dice:

    Hola, disculpa la pregunta, soy nuevo en esto y estoy probando el codigo y no funciona, talvez me puedes indicar donde poner cada seccion de codigo, es claro que la primera parte va dentro de head, he puesto la ultima parte del script tambien en head y no noto ningun cambio, me aparecen los dos textos de los bloques cf en la pagina de prueba, por favor me puedes decir que estoy haciendo mal. Muchas Gracias

  9. eduardo dice:

    amigos QUE VERSIÓN DE Internet eplorer están usando, porque tengo la versión 7 y 8, y en ambas no sirve, en cambio en mozila sirve excelente..

  10. Martin dice:

    Funciona bien, en Firefox e IE, pero al parecer no soporta imagenes, si habria alguna forma seria genial. Muchas gracias por el script, es justo lo q estaba buscando

  11. Psickotronic dice:

    Existe alguna manera de detener la rotación del contenido mientras el puntero del mouse esté encima del div…. y que continúe la rotación al quitar el puntero? gracias…

  12. Juan Manuel dice:

    Pues sí, eso puedes lograrlo al bindear el evento “hover” del mouse al detenimiento del scroll. Pero ese script que te descargas requiere que sepas javascript para tocarlo :/

  13. juan carlos dice:

    gracias me funcionó muy bien con imagenes y cualquier contenido, tuve que modificar el CSS para adaptarlo a mi pagina pero funcionó muy bien y probado en exporer, firefox y safari

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder