Plugin jQuery ticker de noticias dinámico

  • Por
Descripción y uso de un plugin para crear un ticker de noticias dinámico en jQuery, que muestra varias noticias en un espacio reducido, por medio de un scroll suavizado.
Hemos publicado un nuevo plugin jQuery para hacer un comportamiento dinámico en un sitio web. El plugin en si no tiene mucha dificultad, pero ofrece un comportamiento interesante para muchos ámbitos, a pesar de su corto código. Creo que podrá interesar a más de uno, ya sea para aprender un poco más del desarrollo de plugins en jQuery o para utilizarlo directamente en sus páginas web.

En este caso estoy lanzando el plugin "como Diós manda", es decir, en su propio archivo js, con comentarios sobre el uso, especificación de la licencia y todo aquello que suelen tener los plugins jQuery que utilizamos en el día a día. Implica un poquito más de trabajo, pero creo que merece la pena para las personas que quieran aprovechar este trabajo para ponerlo en producción en sus sitios web. No obstante, tal como estoy acostumbrado a hacer en DesarrolloWeb.com, presentaré a continuación una descripción detallada sobre cómo utilizarlo y unas pequeñas notas sobre las claves acerca de su ingeniería.

Descripción del plugin

Se trata de un sencillo plugin para hacer una presentación de novedades o noticias, de manera dinámica y con animaciones suavizadas. Las noticias rotarán, mostrándose con un scroll o desplazamiento en un espacio reducido, que es totalmente configurable por medio de estilos CSS.

En resumen, este plugin produce de manera sencilla lo que se conoce como ticker de noticias, una de las aplicaciones más clásicas del HTML Dinámico.

Lo mejor para hacerse una idea exacta de qué hace este complemento es ver un ejemplo en marcha.

Autoría y Licencia

El plugin ha sido relacionado por el que firma este artículo, léase, Miguel Angel Alvarez, para DesarrolloWeb.com.

La licencia es "Open source under the BSD License", osea que en palabras que todos entendamos, puedes utilizar este script para los usos que desees, incluso comercialmente.

Por supuesto, se agradecería el reconocimiento con un enlace a www.desarrolloweb.com.

Uso del Plugin de noticias dinámico, paso a paso

Por ponerle un nombre más o menos comercial he llamado al plugin "dwDinaNews". Puedes descargar el plugin y los ejemplos desde github.

En resumen, para usar el plugin debes crear un contenedor cualquiera y dentro una lista UL con tantos LI como noticias desees que aparezcan en rotación. Debes llamar al plugin con el contenedor donde hayas colocado dicha lista.

$("#contenedor").dwdinanews();

Quizás con esa corta explicación tengas más que de sobra para montar tu propio ejemplo del plugin en marcha, ya que es todo bastante sencillo. No obstante, para las personas que necesitan una guía más detallada, ahora explicaré una receta paso a paso.

1) Incluir los scripts Javascript:
En la cabecera (HEAD) de la página tenemos que incluir varios scripts Javascript:

  • El framework Javascript jQuery
  • El plugin jQuery Timer, un script realizado por otros desarrolladores útil para la gestión de los tiempos de retardo entre la presentación de cada noticia.
  • El plugin ticker de noticias dinámico "dwDinaNews", es decir, el desarrollo que estamos presentando en este artículo.
Todo esto se se consigue con las siguientes etiquetas:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.timer.js" type="text/javascript"></script>
<script src="jquery.dwdinanews.0.1.js" type="text/javascript"></script>

Nota: el plugin Timer está explicado con detalle en el artículo sobre Timer de jQuery, donde también encontraréis el enlace para descarga.

2) Código HTML de las noticias a mostrar:
El listado de las noticias a mostrar dinámicamente en el plugin lo debes hacer en HTML, con un código como puedes ver a continuación.

<div id="novedades">
   <ul>
      <li>
         <a href="#">Novedad primera</a>:
         <br>
         Lorem ipsum est quo sit amentus apis larumser.
      </li>
      <li>
         Segunda novedad...
      </li>
      <li>
         ...
      </li>
   </ul>
</div>

Como puedes apreciar, tenemos un contenedor y dentro una lista UL normalita. Dentro del UL colocamos tantos LI como noticias deseemos rotar. El código que coloques dentro de los LI es indiferente, pero generalmente querrás poner un enlace para abrir la noticia correspondiente y quizás un texto de descripción de ese enlace. Nada impide colocar imágenes dentro de los LI y utilizarlo simplemente para hacer una rotación de fotografías, comúnmente conocido como slide de imágenes.

Lo que es importante es que le pongas un identificador al elemento contenedor de la lista, porque luego tendrás que referirte a ese elemento para aplicarle estilos CSS e invocar al plugin jQuery. En este caso hemos colocado id="novedades".

3) Estilos CSS para funcionamiento de la lista, de modo que muestre únicamente lo que tú desees:
Ahora viene la parte en la que más podrás innovar y personalizar el aspecto de tu ticker de noticias. Se trata simplemente de aplicar los estilos CSS que juzgues oportunos para adaptar la lista a tu sitio web y el contenedor de la misma.

Ahora bien, harán falta algunos estilos específicos que sí serán necesarios. Me refiero a la parte en la que conseguimos que, de todos los elementos de la lista (todas las novedades), sólo se muestre el primero y los otros estén ocultos. Esto se consigue con un overflow: hidden en el elemento contenedor y definiendo un tamaño suficiente para que se muestre sólo lo que tú desees. Esos estilos los ves en el selector "#novedades". Además, le hemos colocado también un tamaño a cada elemento de la lista, selector "#novedades li", y también un overflow: hidden para que no se descuadre, si el contenido sobrepasa las dimensiones asignadas.

Otro detalle importante es colocarle a la lista UL el estilo position: relative, que sirve para que nos admita los atributos top y left, para modificar la posición de la lista. Esto resulta clave porque vamos a generar la animación con jQuery cambiando el atributo de CSS "top" de la lista UL.

El resto de estilos, a pesar de tener algún motivo para nuestro ejemplo, son principalmente opcionales. A continuación puedes ver las declaraciones que utilizamos nosotros en el primero de los ejemplos.

#novedades{
   border: 1px solid #ccc;
   width: 234px;
   height: 60px;
   overflow: hidden;
}
#novedades ul{
   margin: 0;
   padding: 0;
   position: relative;
   top: 0;
   left: 0;
}
#novedades li{
   margin: 0;
   padding: 5px;
   height: 50px;
   overflow: hidden;
   line-height: 16px;
}
#novedades li a{
   font-weight: bold;
   text-transform: uppercase;
}

4) Javascript para invocar al plugin dwDinaNews:
Ya está todo casi listo, simplemente nos falta llamar al plugin para que nos empiece a animar nuestra lista de novedades. Esto lo conseguimos con esta sencilla línea Javascript.

$("#novedades").dwdinanews();

Nota: por supuesto, esa instrucción tiene que ser invocada cuando el navegador esté listo para recibir acciones Javascript que modifiquen el DOM de la página. Para ello tenemos que meter esa sentencia dentro del típico evento ready() del document.
$(document).ready(function(){
   $("#novedades").dwdinanews();
})

Opciones de personalización del plugin dwDinaNEWS

He realizado un pequeño conjunto de opciones que puedes utilizar para personalizar un poco más tu plugin de novedades dinámicas. Para ello, al invocar al plugin puedes pasar un objeto de opciones típico de jQuery, que podrá tener las siguientes propiedades:

retardo: El tiempo que debe permanecer una noticia, en milisegundos. Es decir, los milisegundos que pasan entre la visualización de una noticia y otra. Por defecto son 2 segundos.

tiempoAnimacion: el tiempo que tarda la animación al pasar de una noticia a otra, también en milisegundos. Por defecto es medio segundo.

funcionAnimacion: la función a utilizar para la animación entre noticias. Esta función podrá ser una de las proporcionadas por el plugin Easing de jQuery (ver más adelante). Por defecto se utiliza la función estándar de jQuery.

Así se invocaría al plugin enviando unas opciones de configuración distintas:

$("#otrasnovedades").dwdinanews({
   retardo: 5000,
   tiempoAnimacion: 1000,
   funcionAnimacion: 'easeInOutElastic'
});

Uso del plugin "jQuery Easing" (opcional)

Si lo deseas, puedes usar opcionalmente el plugin "jQuery Easing", que te permitirá especificar una gran variedad de funciones de animación en el parámetro de opciones del plugin "funcionAnimacion", de una manera super sencilla.

Para ello tienes que incluir el plugin Easing de jQuery en el HEAD de tu página y pasar en la opción funcionAnimacion cualquier nombre de función de animación de las que implementa Easing.

Para más información te recomiendo leer el artículo con la explicación del plugin Easing.

En el segundo ejemplo de los que encontrarás en este enlace puedes ver una animación personalizada aun más gracias a Easing.

Código del plugin con comentarios

Para que se pueda entender un poco mejor cómo se ha desarrollado el plugin, y de paso puedas sentirte un poco más libre para hacer las modificaciones que estimes necesarias, voy a colocar a continuación el código Javascript del componente con comentarios.

//comienza el código del plugin
(function($) {
   //el nombre del plugin se define aquí
   $.fn.dwdinanews = function(opt) {
      //definición de las opciones por defecto
      var opciones = {
         retardo: 2000,
         tiempoAnimacion: 500,
         funcionAnimacion: ''
      }
      //se mezclan las opciones por defecto con las opciones recibidas al invocar el plugin
      jQuery.extend(opciones, opt);
      
      //para cada elemento donde se invoque el plugin
      this.each(function(){
         //accedemos a la lista LU que hay dentro del contenedor
         var listaNovedades = $(this).children("ul");
         //accedemos a un array de los elementos LI que hay en la lista
         var elementosLista = listaNovedades.children("li");
         //se marca el elemento que el plugin está mostrando en este momento
         var elementoActual = 0;
         //invocamos al plugin timer para realizar los retardos entre noticia y noticia
         $.timer(opciones.retardo, function(timer){
            //incrementamos el elemento a mostrar, sin salirnos del rango de LIs
            elementoActual = (elementoActual + 1) % elementosLista.length;
            //modificamos la posición de la lista UL para producir la animación
            listaNovedades.animate({
               top: "-" + $(elementosLista[elementoActual]).position().top + "px"
            }, opciones.tiempoAnimacion, opciones.funcionAnimacion)
         });
      });
      return this;
   };
})(jQuery);

Nota: Quienes hayan seguido el Manual de jQuery no deberían tener dudas al entender este código, ya que no hay nada nuevo que no se haya explicado anteriormente. No obstante, por dar algunas referencias útiles para entender este script, pongo los enlaces a diversos artículos.

Nada más nos queda desear que aproveches este desarrollo, ya sea para aprender un poco más de jQuery o para implementarlo en tu página web.

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Erniman

25/8/2011
Plugin en Firefox
Hola buen dia. Muchas gracias por el articulo...totalmente útil.

mi pregunta es sobre el funcionamiento de este plugin en el navegador Firefox. Por algun motivo el funcionamieno no es como en, por ejemplo, Chrome (donde si funciona correctamente).
Luego de unos segundos las noticias comienzan a pasar mucho más rápido hasta que luego vuelve a su retardo normal (que yo configuré).

Se puede ver este funcionamiento en www.sccradio.com.ar donde lo estoy implementando.

Muchas gracias
Saludos.

ayjezulito

02/9/2011
Compatibilidad con otras librerías jquery
muy bueno este plug, pero me gustaría saber si es compatible con otras librerías jquery en el mismo documento. En mi último proyecto he usado el plg fullscreenr junto al plug lightbox. He usado el "no conflict" y va perfecto en safari, crhome, firefox? pero en explorer peta. Existe aqui algún foro donde plantear esta duda??
gracias!!

luisbi

03/9/2011
Plugin jQuery ticker de noticias dinámico
A mi no me funciona, probé de todas las maneras y no hay caso, no sé que estoy haciendo mal, ya que me baje todos los archivos y los puse en una carpeta js y luego copié y pegué todos los pasos con sus respectivas definiciones.
Alguien se le ocurre alguna idea?
Muchas gracias

marcel

27/9/2011
Distinto tiempo de permanencia para cada noticia
Hola, felicidades por tan buena y didáctica explicación del plugin jQuery dwDinaNews, gracias a ella y a mis escasos conocimientos (por no decir nulos) de js la he podido implementar en mi web de manera sencilla y funciona de maravilla.

Una pregunta, se pueden poner distintos tiempos de permanencia para cada noticias. xej, 5000 ms la 1ra, 3000 ms la 2da, etc? gracias.

midesweb

28/9/2011
Se acelera
Hola Erniman,

He entrado en tu sitio con Firefox, he visto el plugin funcionando por un rato. Efectivamente, se acelera... La historia es que utilizo el plugin timer para controlar los tiempos y estoy imaginando que sea problema de ese plugin que no he desarrollado yo... pero lo revisaré.

marcel

08/10/2011
se acelera
Hola Erniman,

A mi me pasaba tambien lo mismo, borre las variables retardo: 5000,
tiempoAnimacion: 1000, del script que debes agrgar en el Head y se arreglo. (los tiempo los puedes configurar en jquery.dwdinanews.0.1.js)

saludos

adrian_gattorno-474833

05/12/2011
hola
hola excelente artículo y muy buen trabajo. Quisiera hacer una pregunta hay forma de que las noticias en ves de salir de abajo a arriba salgan de derecha a izquierda??

jean

07/12/2011
No me funciona bien
Tengo un pequeño problema con el script ,
miren yo tengo las noticias registrados en un base de datos con un id autoincrement,
en mi pagina solo tengo que llamar una sola variable de una cadena,y para eso uso un solo <li> para ordenarlos,pero resulta que este script no se mueve con un solo <li>.¿Cual podría ser el problema o en qué parte de los scripts jquery tengo que modificar?
Lo tengo publicado asi:
<ul>
<li>
<?php $mivar=['titulo_noticia'];
</li>
</ul>
</div>.
Se me muestran todos los titulos ordenados segun el css pero no sube ni bajan igual que en el tutorial.
se agradece de antemano cualquier respuesta,muchas gracias

johersa

06/4/2012
Es posible configurar el ticker ciclico?
Excelente página, gracias por compartir los conocimientos con sus artículos y tutoriales; quería saber si es posible configurar este ticker de manera que al llegar a la última noticia no se vea ese salto tan horrible hasta el primero, sin que el usuario lo note.

gustavo_fiorentini

02/3/2013
Problema en Chrome
Hola. Me ha parecido excelente tu plugin. Lo instalé y funciona muy bien en una pequeña "persiana" de anuncio de novedades. Pueden verla aquí: http://www.sanarderaiz.com.ar
El problema surge al ver la página en Chrome. El ticker tiene cuatro bloques de texto y en este navegador solamente pasa del primero al segundo y se estanca allí. Funciona bien en todos los demás browsers.
He buscado bastante pero no he podido solucionarlo. Agradezco cualquier idea o aporte.
Saludos

Raul pavia Mendoza

22/10/2013
como hacer para que salgan mas de 2 noticias
hola en el segundo ejemplo puedes poner cuantas noticias quieras y en el uno solo aparecen 2 noticias y ya no mas. y no se hace el ciclo como en el ejemplo numero 2 ,,,,,porque pasa eso ayuda ¡¡¡¡¡¡