Create a news ticker with PHP and jQuery News Ticker

You promised a friend to help him create a beautiful site for his business. I know that you have, to me at least three or four times, of course, always in the worst work speaks.

Usually the requests are low at the beginning: "I need a static display there ... you put me two days three years of Visual Studio code snippets and so on. But the programmer knows that the friend mind, sometimes in good faith, others a bit less.

Since you understand that I am once again in this delicate situation and the request is not expected this time about a news ticker. Well basically worse than I thought, so I get to work to try something nice and customizable.
At first I find the Google search site JQuery News Ticker . Convince me.
'S HTML to create simple, well-written documentation, the discharge. Now that the first step to the second problem is solved: my friend does not have a DB ...

The solution

If there is a DB can always use text files for news, fortunately my friend knows how to use the 'ftp, the only problem is making sure that it should not waste too much time to create his own news. I opt for this facility:

It will be easy to bring the news as simple text files under the folder of the same name and images into the images subfolder. One caveat: the same name for its news and image (unless the extension).

For the rest it is to have a folder where to put classes the only class that is used, the folder js jQuery, the ticker, which initialize the file and a folder for css styles.

Via also attach a screenshot of the Eclipse project creation.

The JS

In addition to the latest JQuery (1.6.1 at the time of writing) I take the package JQuery News Ticker jquery.ticker.js the file. You should not change anything, I create only one file to initialize the ticker to the DOM Ready newsloader.js.

newsloader.js

 / / DOM-ready







 $ (Function () {



  



 / / Create the ticker



  



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



    



 ajaxFeed: false, / / ​​no feed



    



 htmlFeed: true, / / ​​html is



    



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



    



 DisplayType: 'fade', / / ​​Reveal or fade, fade choose



    



 direction: 'ltr', / / ​​direction ticker



    



 pauseOnItems: 5000, / / ​​take the time to read the news to the navigator!



    



 fadeInSpeed: 600, / / ​​fade-in speed



    



 fadeOutSpeed: 300 / / fade-out speed



  



 });







 });

The script does is create the ticker to the DOM Ready, passing the options useful, especially in this case I chose to use the fade and do not reveal the sheer aesthetic choice.
Note: The Reveal creates the effect of "write-on" that does so much typewriter.
Another important setting pauseOnItems I set to 5 seconds to allow time for the reader to get to the bottom of the news.

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