kluster
Dio maturo
Registrato: 15/04/06 13:14
Messaggi: 2898
|
 Inviato: 20 Mar 2007 12:59 Oggetto: [TUTORIAL] Creare un news slider accessibile e non intrusivo |
 |
|
TUTORIAL - Creare un news slider accessibile con JQuery ed il suo plugin News Slider Menu
Gli slider sono una soluzione molto utile per avere all'interno del vostro sito una sezione del layout a contenuto fisso, in cui possono apparire news (o banner, promozioni etc) scorrevoli (slider appunto), ossia che cambino da un elemento all'altro in maniera automatica (stabilendo un intervallo di tempo) o che reagiscano agli eventi della pagina (il click dell'utente per esempio).
La soluzione pero' la maggior parte delle volte, presupponendo javascript per le animazioni è difficilmente accessibile e quasi mai non intrusivo, ossia che in mancanza di javascript attivo, la visualizzazione della pagina non ne venga alterata in maniera rilevante.
Da una segnalazione di Alessandro Fulciniti ho analizzato questa:
Accessible News Slider Plugin v1.1 for JQuery.
Se avete Firefox con la developer bar potete tranquillamente disabilitare il Javascript per vedere che la visualizzazione è garantita (si allunga semplicemente l'altezza del layer).
Vediamo di analizzare in dettaglio come implementare lo script.
Inseriamo gli script utili per il funzionamento nel tag HEAD
1) INSERIMENTO SCRIPT E STYLE
| Codice: |
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="jquery.accessible-news-slider.js"></script>
|
Sempre nel tag HEAD inseriamo un nuovo tag script per impostare le opzioni javascript dello script
2) PERSONALIZZAZIONE DELLO SCRIPT
| Codice: |
<script language="javascript" type="text/javascript">
$(function() {
$(".top_stories").slideNews();
/*
var options = {
headline: "Top Stories" (String) | Each unique slider (id) or set of sliders (class) can receive a headline.
newsWidth: 285, (Integer) | The demo is 285. Modifying will require a modification to the CSS.
newsSpeed: "normal" (String/Integer) | "slow","normal","fast", or an integer, with 1 being the fastest animation.
}
$(".top_stories").slideNews(options);
NOTE:
The newsWidth is the width of each news item, including the photo, news callout,
and a 10 pixel margin. The slideNews() method will slide 2x the newsWidth -- moving
two news stories off the viewable stage with a click of the next/previous buttons.
*/
});
</script>
|
Come vedete lo stretto necessario è impostare quale sara' il layer che effettuera' lo slider.
| Codice: |
$(".top_stories").slideNews()
|
ed eventualmente è possibile inviare allo script opzioni personalizzate attraverlo l'oggetto options.
| Codice: |
var options = {
headline: "Top Stories", // Stringa, l'intestazione dello slider (nella figura potete vederlo come "Top Stories [ $NUMEROELEMENTI$] [U]View All[/U]"
newsWidth: 285", // un numero intero. Per modificare la larghezza dello slider, e deve conseguentemente modificato anche lo style
newsSpeed: "normal" // Puo' essere un numero oppure una stringa, valori permessi "slow" = lento, "normal" = velocita' normale, "fast" = veloce
// inserendo 1 si ottiene l'animazione più veloce e dipende dalla velocita' del processore
}
//a questo punto inizializzate la chiamata passando come parametro l'oggetto options
$(".top_stories").slideNews(options);
/* NOTA:
la variabile newsWidth rappresenta la larghezza di ogni singolo elemento news, incluso foto, lo spazio di richiamo della news e 10 pixel
di margine. Il metoto SlideNews() scorrera' di una misura pari a 2 volte la dimensione specificata nella variabile newsWidth -- muovendo quindi
2 elementi fuori dalla parte visibile secondo il click del bottone next/previsous (successivo/precedente)
|
Per personalizzare lo stile di visualizzazione del layer che conterra' le slides, prima vediamo quale è la struttura dello slider:
3) L'HTML
| Codice: |
<div class="news_slider top_stories">
<div class="messaging">
MESSAGIO IN CASO IL JAVASCRIPT SIA DISABILITATO
</div>
<a href="" class="skip" title="In caso di javascript disabilitato non potrai saltare direttamente al contenuto.">Vai al contenuto della news.</a>
<!-- immagine per passare alla news precedente -->
<div class="prev">
<a href="#"><img src="images/prev.gif" width="16" height="16" alt="Precedente" title="Precedente" env="images" /></a>
</div>
<!-- immagine per passare alla news successiva -->
<div class="next">
<a href="#"><img src="images/next.gif" width="16" height="16" alt="Successiva" title="Successiva" env="images" /></a>
</div>
<!-- sviluppo del contenuto dello slider -->
<div class="news_items">
<a name=""></a>
<div class="container fl">
<!-- 1a news -->
<div class="item fl">
<!-- 1a miniatura -->
<a href="/" title="Alternate del Primo link"><img src="1a IMMAGINE" width="75" height="75" alt="ALT Foto 1" class="fl" /></a>
<!-- corpo 1a news -->
<div class="fl">
<a href="/" title="Alternate del link.">Link alla 1a news</a>
<br />
Descrizione 1a news
</div>
</div>
<!-- 2a news -->
<div class="item fl">
<!-- 2a miniatura -->
<a href="/" title="Alternate del Secondo link"><img src="2a IMMAGINE" width="75" height="75" alt="ALT Foto 2" class="fl" /></a>
<!-- corpo 2a news -->
<div class="fl">
<a href="/" title="Alternate del link.">Link alla 2a news</a>
<br />
Descrizione 2a news
</div>
</div>
<!-- .... 3a news etc etc a news -->
</div>
</div>
</div>
|
come si vede viene usata la tecnica dell'attribuzione di + classi allo stesso elemento class="classe1 classe2"
4) PERSONALIZZAZIONE DEGLI STILI
Ora sappiamo quali elementi personalizzare nello style. Inseriamo lo style nel tag head o linkiamolo come style esterno (sempre nell'HEAD)
| Codice: |
/* Stili della pagina generali [ inizio ] */
body {font: normal 75% "Arial","Helvetica",sans-serif;}
a {color: #336699;}
img {border: 0; display: block;}
/* Stili della pagina generali [ fine ] */
/* stili specifici per lo slider [ inizio ] */
/* elementi float left utilizzati per le immagini e per i singoli elementi delle slider */
.fl {float: left; display: inline;}
/* personalizzazione del link per effettuare lo skip (saltare al contenuto della news) */
.skip {position: absolute; left: -5000px;}
/* stili del contenitore globale dello slider */
.news_slider {position: relative; width: 600px; margin: 0 0 10px 0;}
/* stili del messaggio di errore in caso javascript disabilitato */
.news_slider .messaging {display: block; padding: 5px; margin: 0 20px 5px 20px; background: #ffffcc;}
/* stili degli elementi per scorrere avanti ed indietro la paginazione */
.news_slider .prev, .news_slider .next {position: absolute; top: 42%; display: none;}
.news_slider .next {right: 0;}
/* stile generale dei singoli elementi */
.news_slider .news_items {position: relative; width: 560px; left: 20px; overflow: hidden;}
/* stile generale del link per visualizzare tutti gli elementi bypassando lo scorrimento */
.news_slider .news_items .view_all {padding: 5px; margin: 0 0 2px 0; border-top: #eeeeed 1px solid; border-bottom: #eeeeed 1px solid; text-align: center;}
/* stile generale del contenitore di tutti gli elementi */
.news_slider .news_items .container {position: relative; top: 0; left: 0; width: 570px; background: #eeeeed;}
/* stili della singola voce [DA MODIFICARE IN BASE A QUALE VALORE SPECIFICATO nella variabile newsWidth */
.news_slider .news_items .container .item {width: 275px; margin: 0 10px 0 0;}
/* stile del layer di descrizione della news [tenete presente che il layer ha anche la classe fl, ossia float left */
.news_slider .news_items .container .item div {width: 170px; margin: 10px 0 10px 0;}
/* padding dell'immagine miniatura della news */
.news_slider .news_items .container .item img {padding: 10px;}
/* stili specifici per lo slider [ fine ] */
|
4) I FILE NECESSARI
Style.css
Jquery.js
Jquery.accessible-news-slider.js
L'esempio html
Le gif next.gif, prev.gif
Il post dell'autore
Sito ufficiale di jQuery: http://www.jquery.com |
|
FAQ
Cerca
Lista utenti
Gruppi
Registrati
Profilo
Messaggi privati
Log in
