Creare slide di immagini
Agile Carousel
Agile Carousel è un altro plugin di jQuery per la crezione di slide, ricco di funzioni: oltre all’effetto slide permette anche transizioni e dissolvenze, pulsanti avanti-indietro, pulsanti per saltare più “pagine”, auto play, loop, …
link: Agile Carousel
Easy Slider
Per creare degli slide di immagini, cioè quell’effetto in cui delle immagini (o altro contenuto web) si scambiano fra loro scorrendo verso una direzione (verticale od orizzontale), non c’è niente di meglio di un bel plugin per jQuery semplicissimo da implementare: Easy slider jQuery plugin!
La sintassi per usarlo è basilare:
Richiamare i due file Javscript tra i tag Head…
<script type="text/javascript" src="/js/jquery.js"> </script> <script type="text/javascript" src="/js/easySlider.js"> </script>
…dopodiché impostare il nostro DIV con le immagini inserita in una lista non ordinata…
<div id="slider"> <ul> <li>immagine 1</li> <li>immagine 2</li> <li>immagine 3</li> </ul> </div>
Definire il DIV che contiene lo slider…
$("#slider").easySlider();
Configurare i pulsanti AVANTI – INDIETRO…
<span id="prevId"><a href="javascript:void(0);">Previous</a></span> <span id="nextBtn"><a href="javascript:void(0);">Next</a></span>
Impostare le opzioni (velocità, orizzontale-verticale, ID dei bottoni avanti-indietro).
link: Easy slider jQuery plugin
Accessible News Slider
Accessible News Slider è un altro leggerissimo (solo 2 kb) plugin per jQuery per presentare dei contenuti tramite uno slide.
Questo ha la particolarità di essere totalmente “accessibile”, poiché tutto (css, xhtml e javascript) è stato studiato per rispondere alle linee guida sull’accessibilità dei contenuti web 1.0
- utenti ipovedenti
- utenti con vista limitata che non usano screen reader
- utenti ciechi che usano screen reader
- utenti che navigano tramite tastiera o strumenti personalizzati
- browser con javascript disabilitato
- browser con la visione delle immagini disattivata
link: Accessible news slider
s3slider è un altro plugin per jQuery che consente di creare degli slide di contenuto (immagini e testo) in maniera molto rapida e facile.
Basta includere i 2 file JS necessari (jQuery ed il plugin) e creare un lista non ordinata dentro ad un DIV.
Coda Slider potrebbe essere “la madre” (o il padre) di tutti gli slider! Si tratta di un altro plugin per jQuery.
Sul sito di css tricks si può trovare un tutorial per migliorare coda slider, e creare uno slider che ci consenta di:
- inserire differenti tipi di contenuti nei pannelli; si può già fare, ma per farla più semplice qui ci sono già delle strutture pronte all’uso; quella principale è avere un’immagine che riempie il pannello con del testo che sta sopra in trasparenza;
- auto-play: si possono sempre cliccare le miniature per far scorrere lo slider, ma se non clicchi scorrono anche da sole;
- frecce sulle miniature che indicano il pannello che stai guardando.
Un altro paio di link da css tricks:
- start/stop slider: aggiungi un pulsante per fermare e far ripartire lo slider con autoplay;
- moving boxes: i pannelli zoomano quando sono visualizzati
jQuery Scrollable è un leggerissimo (6kb) plugin per jQuery che fornisce basilari funzioni di scrolling alle pagine html. A differenza dello scrolling standard di sistema, qui non ci sono le barre di scorrimento e lo scrolling avviene in maniera più sofisticata.
Gli oggetti possono essere fatti scorrere sia in verticale che in orizzontale; tramite bottoni di navigazione, tasit freccia, chiamate API e rotellina del mouse; si può specificare quanti soggetti far scorrere ogni volta. Gli elementi da scorrere possono essere anche aggiunti/eliminati dinamicamente!
http://www.flowplayer.org/tools/scrollable.html