feed-rss-scroller

Una buona idea per proporre il contenuto di un feed rss all’interno di una pagina web, può essere quella di inserire i vari item all’interno di un box, e rendere questo box scrollabile in modo che l’utente possa visualizzare gli item precedenti o successivi. Quello che vogliamo ottenere è – per intenderci – uno scroller come questo.
Il funzionamento di questo scroller è molto semplice: a livello di markup creeremo un contenitore per una lista di item di un feed rss. Ogni item sarà composto dal titolo con link al post, e dalla descrizione dell’articolo: dati che estrarremo dal feed utilizzando un parser PHP: Simplempie. Con i css faremo in modo che un solo item sia visibile. Infine con jQuery “attiveremo” due immagini in modo che funzionino da pulsanti per scrollare la lista da un item all’altro.

DOWNLOAD NECESSARI
Ecco quello di cui avremo bisogno (agli indirizzi che seguono, oltre che un bel po’ di gente a cui dire semplicemente grazie di esistere, troveremo sia gli script e le librerie di cui avremo bisogno, sia la documentazione necessaria per capirne a pieno il funzionamento):

  • l’ultima versione di jQuery
  • il plugin serialScroll (il pacchetto per il download contiene anche scrollTo che sarà necessario)
  • il plugin Truncate
  • l’ottimo parser PHP Simplepie

MARKUP
A questo punto siamo pronti… Cominceremo dal markup.
Il div SCREEN sarà il contenitore all’interno del quale si troveranno le immagini che funzioneranno da pulsanti e il div SCROLL, quello effettivamente da scrollare. Lo scrolling avverà relativamente agli elementi LI presenti all’interno del div SCROLL. Ecco il codice html (qui la live demo):

<div id="screen">
<img class="prev" src="img/up.png" alt="prev" />
<div id="scroll">
<ul>
	<li><a href="url-del-post-corrente">Titolo del post</a>
Descrizione del post - -- Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.</li>
	<li><a href="url-del-post-corrente">Titolo del post</a>
Descrizione del post - -- Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.</li>
	<li><a href="url-del-post-corrente">Titolo del post</a>
Descrizione del post - -- Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.</li>
	<li>...</li>
</ul>
</div>
<img class="next" src="img/down.png" alt="next" />
</div>

IL FOGLIO DI STILE
Bisognerà quindi impostare lo stile per questi elementi, in modo che venga visualizzato solo un elemento LI per volta. Per farlo assegneremo a SCROLL un altezza fissa e nasconderemo tramite la proprietà OVERFLOW tutto il contenuto del div che eccede quest’altezza. Tra le altre cose poi, distanzierermo verticalmente tra loro i vari LI settando un discreto margine inferiore. Ecco il CSS (qui il risultato):

#screen  {width:300px; text-align: center}
#screen img {margin: 0 auto}

#scroll {width:300px; height:90px; overflow: hidden; background: #dcdcdc; border: 1px solid #cccccc}
#scroll ul {margin:0; padding:0}
#scroll ul li {padding: 5px 10px 5px 5px; margin: 0 0 40px 0; list-style: none; text-align: left; }

jQuery, serialScroll e Truncate
Per far sì che lo scroll funzioni, bisognerà includere jQuery e ed il plugin serialScroll (che per funzionare ha a sua volta bisogno di scrollTo). Richiameremo anche Truncate, che ci servirà a breve.

<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery/jquery.scrollTo.js"></script>
<script type="text/javascript" src="jquery/jquery.serialScroll.js"></script>
<script type="text/javascript" src="jquery/jquery.truncate.js"></script>

La funzione serialScroll ci permetterà di rendere scrollabile SCROLL, definendo LI come item a cui lo scroll dovrà riferirsi.

$(document).ready(function(){	

$('#screen').serialScroll({
target:'#scroll',
items:'li',
prev:'img.prev',
next:'img.next',
axis:'xy',
duration:700,
force:true
});

});

Resta da considerare un aspetto che può vanificare il nostro tentativo di rendere assolutamente gradevole l’aspetto dello scroller: all’interno dell’elemento LI che viene visualizzato si potrebbe trovare un testo che occupa uno spazio superiore all’altezza prevista. Una possibiltà per ovviare a questo problema è “troncare” il testo in questione, in modo che non ecceda l’altezza del nostro scroller e che quindi non risulti tagliato. A questo scopo utilizzeremo un altro plugin per jQuery, Truncate. Una volta incluso nella pagina, ci servirà per impostare il numero di caratteri oltre i quali sarà necessario troncare il testo (senza che però venga tagliata a metà l’ultima parola): in questo caso 150.

$("#scroll ul>li").truncate(150);

A questo punto il nostro scroller sarà pienamente funzionante: qui c’è una demo della versione realizzata fino ad ora. Adesso bisognerà riempirla con i contenuti da estrarre da un feed RSS.

PARSARE IL FEED RSS CON SIMPLEPIE
Evidentemente abbiamo bisogno di uno script server-side, in grado di recuperare il contenuto del feed che desideriamo visualizzare. Se utilizziamo PHP, fa al caso nostro Simplepie. Una volta incluso simplepie all’interno della pagina, potremo creare un array contenente i primi dieci item del nostro feed:

handle_content_type();
for ($x = 0; $x &lt; $thefeed-&gt;get_item_quantity($total_articles); $x++  )
{
$articles[] = $thefeed-&gt;get_item($x);
}
?&gt;

Utilizzeremo quindi un ciclo FOREACH per estrarre da questo array titolo, link e descrizione del post contenuti in ogni item. Sfrutteremo inoltre lo stesso ciclo per “creare” la lista all’interno della quale avverrà lo scrolling.

<?php
foreach ($articles as $item)
{
echo '<li><a href="' . $item->get_link() . '">' . $item->get_title() . '</a><br/>'. $item->get_description().' </li>';
}
?>

Questo è quanto: qui c’è la pagina PHP completa per realizzare lo scroller di feed rss che invece vedete in azione qui.

Spero che il tutorial sia stato utile: in questo caso ecco l’inidizzo per aggiungere danielerollo.com al vostro reader e restare sempre aggiornati.
Quanto a suggerimenti o critiche, come sempre potremo discuterne nei commenti…

This entry was posted in Tutorial, Webdesigner and tagged , , , , . Bookmark the permalink.

8 Responses to Creare uno scroller di rss con Simplepie e jQuery

  1. piero says:

    molto interessante

  2. scippy says:

    Ciao Daniele,
    grazie per questo tutorial. Vorrei sapere se il serialscroll può essere configurato senza pulsanti per visualizzare in ciclico gli elementi. Se si potresti indicare come?
    Grazie!

  3. daniele says:

    Ciao,
    nella pagina delle demo di serialScroll potresti trovare l’esempio che stai cercando:
    http://demos.flesler.com/jquery/serialScroll/

  4. DoZ says:

    oh-oh: Not Found! :(
    Anch’io ti ringrazio per la condivisione di questo bel tutorial, e anch’io mi chiedevo se e come creare un scrolling ciclico automatico senza pulsanti.
    …vorrei creare un “news-scroller” sul widget degli articoli più recenti in WordPress.
    ciao!

  5. daniele says:

    ciao DoZ, spero che Flesler ripristini il dominio al più presto. Comunque appena ho un attimo creo una demo con lo scrolling automatico.
    Nel frattempo puoi dare un occhiata a questo post di Giancarlo Mingati.

  6. DoZ says:

    Az! Splendido link, Daniele!
    …peccato solo che a me il news ticker serva in verticale ;P
    Comunque ottimo lo stesso, grazie!
    ciao

  7. DoZ says:

    Ho trovato che c’è già un plug in ad hoc:
    http://wordpress.org/extend/plugins/accessible-news-ticker/
    Mio papà diceva “c’è un plugin per tutto”; certo però che bisogna soprattutto essere bravi a scovarli!!
    ;)

  8. fabio says:

    ciao a tutti, qualcuno saprebbe dove va indicato di quanti pixel deve scrollare il contenuto?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>