Qualche giorno fa ho avuto il bisogno di realizzare un News Slider in jQuery per un mio cliente, un lavoro non propriamente da pochi minuti. La scelta è ricaduta su un News Ticker simile a quello della BBC, con qualche piccola modifica di funzionamento, giusto per personalizzare un pelo il lavoro.
Chiaramente il numero delle Slide deve essere personalizzato dal cliente, cosi come titolo, testo e fotografie. La definizione della dimensione esatta della fotografia la lasciamo al lato server, al pannello di controllo dietro al sito, siccome ognuno ha il suo, che sia un CMS esistente o un sito realizzato ex novo.
La prima cosa da fare è quella di caricare la libreria jquery; mi salvo il mio bel file dal sito jquery.com e lo metto nella root del sito:
<html> <head> <meta charset="utf-8"> <title>Il mio News Ticker BBC like</title> <script src="jquery-1.7.2.min.js" type="text/javascript"></script> <link href="breakingnews.css" rel="stylesheet" type="text/css"> </head> <body> </body> </html>
Chiaramente, se volete far puntare la vostra pagina al jquery servito da Google, è sufficiente utilizzare https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js .
Come vedete ho anche creato e collegato il mio bel CSS breakingnews.css.
Il file JSON come archivio dati
Siccome ho detto di preferire un file JSON come fonte dei dati, eccovi il codice:
{
"results": [
{
"macrotitolo":"MacroTitolo 1",
"titolo": "Titolo 1",
"testo": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie est id nunc eleifend sed hendrerit neque scelerisque.",
"img":"breakingnews_img/001.jpg"
},
{
"titolo": "Titolo 2",
"testo": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie est id nunc eleifend sed hendrerit neque scelerisque.",
"img":"breakingnews_img/002.jpg"
},
{
"macrotitolo":"MacroTitolo 3",
"titolo": "Titolo 3",
"testo": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie est id nunc eleifend sed hendrerit neque scelerisque.",
"img":"breakingnews_img/003.jpg"
},
{
"titolo": "Titolo 4",
"testo": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie est id nunc eleifend sed hendrerit neque scelerisque.",
"img":"breakingnews_img/002.jpg"
},
{
"macrotitolo":"MacroTitolo 5",
"titolo": "Titolo 5",
"testo": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie est id nunc eleifend sed hendrerit neque scelerisque.",
"img":"breakingnews_img/003.jpg"
},
{
"titolo": "Titolo 6",
"testo": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie est id nunc eleifend sed hendrerit neque scelerisque.",
"img":"breakingnews_img/002.jpg"
},
{
"macrotitolo":"MacroTitolo 7",
"titolo": "Titolo 7",
"testo": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie est id nunc eleifend sed hendrerit neque scelerisque.",
"img":"breakingnews_img/003.jpg"
}
],
"record_totali": "7"
}
Il file JSON, così ragionato, è estremamente facile e veloce da generare.
Se volete un servizio facile e veloce per validare il vostro file JSON, cliccate qui.
La cosa importante è inserire, nel campo record_totali, il numero dei record presenti in archivio. In questa maniera facilitiamo la vita allo script, dicendogli direttamente quante miniature creare e quale sia la fine della strip. Come creare il file JSON da ASP o PHP dovrebbe essere piuttosto facile da trovare, se così non fosse, lasciate pure un commento e cercherò di aiutarvi.
Nel prossimo post andremo metteremo in pagina il codice HTML necessario per realizzare il nostro bel News Ticker BBC like.
Se il post ti è piaciuto, se non ti è piaciuto, ma soprattutto se hai voglia di farlo, condividilo su Twitter / Facebook / Google+. Grazie!