SummArg | Cursos y recursos para webmasters

26/09/2011

jQuery News Ticker, como el de la BBC

Este genial News Ticker está inspirado en el de BBC News. Muestra titulares, animando los textos y rotando los mismos con unos pequeños controles que permite pausar, retroceder o adelantar el mismo.

Es muy fácil de instalar y cuenta con su archivo de estilos, lo que simplifica aún mas las cosas.

¿Cómo utilizarlo?

Descargamos el plugin y su archivo de estilos al directorio /scripts/ de nuestro sitio. En nuestro documento, entre etiquetas <head>, vinculamos los archivos así como el framework jQuery.

<link href="css/ticker-style.css" rel="stylesheet" type="text/css" />
<script src="jquery.ticker.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

Ahora entre etiquetas <body>, colocamos el HTML de nuestras noticias.

<div id="ticker-wrapper" class="no-js">
    <ul id="js-news" class="js-hidden">
        <li class="news-item"><a href="#">Un titular genial!</a></li>
        <li class="news-item"><a href="#">Otro gran titular genial!.</a></li>
        <li class="news-item"><a href="#">Tercer titular de nuestro ticker</a></li>
        <li class="news-item"><a href="#">Cuerto item de nuestro ticker de noticias jQuery.</a></li>
    </ul>
</div>

Y antes del cierre de la etiqueta </body>, colocamos las siguientes líneas para que el script se aplique al ID js-news

<script type="text/javascript">
    $(function () {
        $('#js-news').ticker();
    });
</script>

jQuery News Ticker posee varias opciones de configuración bien documentadas en su sitio oficial.

Dejar un comentario

  1. Este script se podría conectar con Google News?, estaba buscando justo eso, gracias de antemano.

Dejar un comentario