Crear un ticker de noticias con PHP y jQuery News Ticker

Le prometí a un amigo para ayudarle a crear un hermoso sitio para su negocio. Yo sé que usted tiene, para mí por lo menos tres o cuatro, por supuesto, siempre en el peor trabajo habla.

Por lo general, las solicitudes son bajos al principio:. "Necesito una exposición estática que ... me pones dos días de tres años de Visual Studio fragmentos de código y así sucesivamente, pero el programador sabe que la mente amigo, a veces de buena fe, otros un poco menos.

Ya que entiendo que soy nuevo en esta delicada situación y la solicitud no se espera que esta vez acerca de un ticker de noticias. Bueno, básicamente, peor de lo que pensaba, así que manos a la obra para intentar algo agradable y personalizable.
Al principio, me parece el sitio de búsqueda de Google News Ticker JQuery . Convencer a mí.
'S HTML para crear simple y bien escrita documentación de la descarga. Ahora que el primer paso para el segundo problema se resuelve: mi amigo no tiene una base de datos ...

La solución

Si hay una base de datos siempre se puede utilizar archivos de texto para las noticias, por suerte mi amigo sabe cómo utilizar el ftp ', el único problema es asegurarse de que no se debe perder demasiado tiempo para crear sus propias noticias. Opto por este servicio:

Será fácil para llevar las noticias como simples archivos de texto en la carpeta del mismo nombre y las imágenes en la subcarpeta de imágenes. Una advertencia: el mismo nombre para sus noticias y la imagen (a menos que la extensión).

Por lo demás, es tener una carpeta donde colocar las clases, la única clase que se utiliza, la carpeta de jQuery js, la clave de pizarra, que inicializar el archivo y una carpeta de estilos css.

Via también adjuntar una captura de pantalla de la creación del proyecto Eclipse.

La JS

Además de las últimas jQuery (1.6.1 en el momento de escribir esto) me tomo el paquete JQuery News Ticker jquery.ticker.js el archivo. Usted no debe cambiar nada, puedo crear un solo archivo para inicializar el control hacia la newsloader.js DOM Ready.

newsloader.js

 / / DOM-listo







 $ (Function () {



  



 / / Crear la clave de pizarra



  



 $ ('# Js-news'). Tickers ({



    



 ajaxFeed: false, / / ​​no alimentación



    



 htmlFeed: true, / / ​​html es



    



 TitleText: 'Breaking News', / / ​​ticker



    



 DisplayType: 'fade', / / ​​revelan o se desvanecen, se desvanecen elegir



    



 dirección: 'ltr', / / ​​dirección del ticker



    



 pauseOnItems: 5000, / / ​​se toma el tiempo para leer las noticias para el navegador!



    



 fadeInSpeed: 600, / / ​​fade-in de velocidad



    



 fadeOutSpeed: 300 / / fade-out de velocidad



  



 });







 });

El script hace es crear la clave de pizarra a la Lista DOM, pasando por las opciones útiles, especialmente en este caso opté por usar el fade y no revelar la elección estética pura.
Nota: Revelar la crea el efecto de "write-on" que hace la máquina de escribir tanto.
Otro ajuste importante pauseOnItems me puse a 5 segundos para dar tiempo a que el lector pueda llegar al fondo de la noticia.

• <<
• 1
• 2
• 3
• 4
• 5
• >>