Creare un news ticker con PHP e jQuery News Ticker
Pagina 1 di 5
Avete promesso ad un amico di aiutarlo a creare un bel sito per la sua attività. So che vi è capitato, a me almeno tre o quattro volte, ovviamente sempre nei periodi peggiori lavorativamente parlando.
Di solito le richieste all'inizio sono basse: "Ho bisogno di una vetrina statica... tu ci metti due giorni io tre anniI code snippet di Visual Studio e via discorrendo. Ma il programmatore sa benissimo che l'amico mente, a volte in buona fede, altre un pò meno.
Dall'introduzione avrete capito che mi trovo ancora una volta in questa situazione delicata e la richiesta non prevista stavolta riguarda un news ticker.Beh pensavo peggio in fondo, quindi mi metto al lavoro per cercare qualcosa di carino e customizzabile.
Alla prima ricerca su Google trovo il sito di JQuery News Ticker. Mi convince.
L'HTML da creare è semplice, la documentazione ben scritta, lo scarico. Ora che il primo problema è risolto passo al secondo: il mio amico non ha un DB...
La soluzione
Se non esiste un DB possiamo sempre usare dei file di testo per le news, il mio amico fortunatamente sa utilizzare l'ftp, l'unico problema è fare in modo che non debba perdere troppo tempo per creare le sue news. Opto per questa struttura:
Sarà semplice mettere le news come semplici files di testo sotto la cartella omonima e le immagini dentro la sottocartella images. Unico accorgimento: stesso nome per notizia ed immagine relativa (a meno dell'estensione).
Per il resto si tratta di avere una cartella classes dove mettere l'unica classe utilizzata, la cartella js per jQuery, il ticker, il file dove inizializzarlo e una cartella css per gli styles.
Via allego anche uno screenshot della creazione del progetto su Eclipse.
I JS
Oltre alla latest di JQuery (1.6.1 al momento in cui scrivo) prendo dal pacchetto di JQuery News Ticker il file jquery.ticker.js. Non è necessario modificare alcunché, creo solo un file per inizializzare il ticker al DOM Ready: newsloader.js.
newsloader.js
// DOM ready
$( function() {
// Creiamo il ticker
$('#js-news').ticker({
ajaxFeed: false, // no feed
htmlFeed: true, // html si
titleText: 'Ultime Notizie', // TITOLO ticker
displayType: 'fade', // reveal o fade, scegliamo fade
direction: 'ltr', // direzione ticker
pauseOnItems: 5000, // diamo il tempo di leggere la notizia al navigante!
fadeInSpeed: 600, // Velocità fade-in
fadeOutSpeed: 300 // Velocità fade-out
});
});
Lo script non fa altro che creare il ticker al DOM Ready, passando le opzioni utili, in questo caso ho scelto soprattutto di utilizzare l'effetto fade e non il reveal per pura scelta estetica.
Nota: il reveal crea l'effetto "scrittura in corso" che fa tanto macchina da scrivere.
Altra impostazione importante pauseOnItems che ho settato a 5 secondi per dare tempo a chi legge di arrivare in fondo alla notizia.
