jQuery Simple Slider

jQuery Simple Slider permette di creare velocemente un feature slide show a partire da una semplice lista UL/LI:

1
2
3
4
5
<ul>
 <li title="Title 1"><img title="Subtitle 1" src="image1.jpg" /></li>
 <li title="Title 2"><img title="Subtitle 2" src="image2.jpg" /></li>
 <li>...</li>
</ul>

Eventuali link, sull’immagine o sul sottotiolo, possono essere inseriti senza alcun problema:

1
2
3
4
5
<ul>
 <li title="Title 1"><a href="#"><img border="0" title="Subtitle 1" src="image1.jpg" /></a></li>
 <li title="Title 2"><img title="Subtitle 2 with a <a href='#'>link</a>" src="image2.jpg" /></li>
 <li>...</li>
</ul>

Utilizzo

È possibile scaricare l’ultima versione direttamente dal repository su Google Code:

1
2
3
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3")</script>
<script type="text/javascript" src="http://undolibrary.googlecode.com/svn/trunk/jquery/jquery.simpleslider/jquery.simpleslider.js"></script>

Una volta che la pagina è caricata:

1
2
3
4
5
6
7
<script type="text/javascript">
google.setOnLoadCallback(
    function() {
         $('ul#myslider').simpleSlider();
    }
);
</script>

Opzioni

È possibile passare una serie di parametri al metodo simpleSlider():

1
2
3
4
5
6
7
8
alpha          Caption opacity (default '0.7'),
bgColor        Caption background color (default '#000')
bgSpeed        Background image fade speed ( 'slow', 'normal', 'fast' or number of milliseconds) default 'slow'
captionSpeed   Caption slideUp/slideDown speed ( 'slow', 'normal', 'fast' or number of milliseconds) default 'slow'
height         Caption height (default '50px')
titleStyle     CSS Object for title
subtitleStyle  CSS Object for subtitle
timeOut        Milliseconds interval between slide ( default 4000 )

Risorse

10 commenti a: “jQuery Simple Slider”

  1. 30 gen, 2009 camu:

    Molto interessante, l’unica cosa che mi perplime è l’accessibilità di questi strumenti. In altre parole, con Javascript disabilitato si scombina tutto, e l’uso dei position:absolute rende difficile la gestione del layout quando l’utente ingrandisce il testo della pagina (ctrl e +). Come risolvere questi problemi? Grazie :)

    RispondiQuota
  2. 30 gen, 2009 Giovambattista Fazioli:

    @camu: ottima domanda! La questione, in effetti, è abbastanza vasta. Semplificando, cercando di rispondere alla tua domanda, possiamo suddividere il problema in due parti: Javascript attivo e layout liquido.

    Strumenti come quello da me proposto partono necessariamente dal presupposto che Javascript sia attivo e che sia stata caricata correttamente la libreria jQuery. Tuttavia, come nel caso qui presentato, questo tipo di script esegue una modifica runtime ad un codice HTML presistente e, spesso, del tutto leggibile anche senza applicare lo script. Questa tecnica, nota con il nome di Javascript non intrusivo (unobtrusive Javascript), ha come scopo principale quello di migliorare una pagina, di per se già funzionante e leggibile, eseguendo aggiunte solo se Javascript è attivo. Tuttavia non esiste una vera e proprio linea di confine tra un Javascript “intrusivo” e uno “non intrusivo”. Ad esempio il Plugin da me presentato potrebbe essere considerato semi-intrusivo.

    Sulla questione più spiccatamente dedicata all’accessibilità, come la possibilità di ingrandire un font, le cose si fanno ulteriormente complicate in quanto entrano in gioco le bitmap usate per costruire le pagine che di solito non subiscono ridimensionamenti come i font. Per superare l’ostacolo bisogna creare una grafica particolare, dei fogli di stili ben confezionati ed usare tutta una serie di tecniche (alcune della quali richiedono Javascript attivo) per “sistemare” un layout di questo tipo a runtime.

    Tuttavia c’è da sottolineare che ultimamente alcuni browser hanno inserito delle funzionalità interne, relative all’accessibilità, per superare alcuni ostacoli relativi agli attuali standard CSS e HTML. Ad esempio è possibile “ingrandire” non più solo il font ma la pagina intera, eseguendo un vero e proprio “zoom ottico”, permettendo così all’intero layput di essere ancora visibile in modo corretto (le bitmap potrebbero apparire un po’ sgranate).

    Credo infatti che questioni di questo tipo dovrebbero essere parte integrante del “core” di un browser così da svincolare gli sviluppatori da questo tipo di problematica. :D

    RispondiQuota
  3. 30 gen, 2009 camu:

    Wow, questa si che è una rispostona :) Grazie per l’essere stato così dettagliato… ho provveduto a prendere appunti!

    RispondiQuota
  4. 31 gen, 2009 Santino Bivacqua:

    Ciao, ottimo script, e soprattutto degradabile….

    Mi chiedevo una cosa, ma è possibile, per ogni slide decidere quanto devve essere la durata?
    Mi spiego, magari alcune immagini sono semplicemente dei titoli, basterebbero 4 secondi e poi alla prossima, però se l’immagine ha molto testo da leggere dovrebbe durare almeno 8/10 secondi…

    Sarebbe utile ad esempio indicando la durata nell’immagine stessa, come ad esempio un bel [ ... perso ... ]
    Che ne dite??

    RispondiQuota
  5. 31 gen, 2009 Giovambattista Fazioli:

    @Santino Bivacqua:

    per ogni slide decidere quanto devve essere la durata

    Penso di aver capito cosa intendi, nonostante si sia perso parte del tuo commento… e mi sembra un’ottima idea. Si potrebbe aggiungere un attributo, ad esempio in un campo rel o custom (ora vedo) e, se presente, decidere singolarmente la durata tra una slide e un’altra.
    Appena posso farò l’aggiornamento e ti citerò per l’ottimo consiglio. Grazie :D

    RispondiQuota
  6. 31 gen, 2009 Santino Bivacqua:

    Ops scusa, ho messo il tag img e non me ne sono accorto….
    Grazie mille, comunque la mia idea era di inserire la durata dentro attributo rel dell’immagine stessa
    ad esempio:

    rel="speed[4]" o semplicemente rel="speed-4" o ancora rel="4"

    verrebbe piu’ comodo, soprattutto quando usi un template engine e mostri delle slide da database, verrebbe scomodo infatti creare anche javascript, anche se non impossibile :)

    RispondiQuota
  7. 31 gen, 2009 Giovambattista Fazioli:

    @Santino Bivacqua: infatti, esattamente quello a cui pensavo :)

    RispondiQuota
  8. 02 feb, 2009 jQuery Simple Slider 1.1.0 | Undolog.com:

    [...] spunto dal suggerimento di Santino Bivacqua ho inserito in jQuery Simple Slider la possibilità di impostare per ogni singola slide un timeOut [...]

  9. 08 apr, 2009 g@briele:

    si possono inserire dei link per far andare le slide avanti ed indietro, senza dover aspettare il time out?

    RispondiQuota
  10. 08 apr, 2009 Giovambattista Fazioli:

    @g@briele: no, in questa release questa features non è stata prevista.

    RispondiQuota

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre> // blocco generico
					<code></code> // blocco generico
					[cc_actionscript][/cc_actionscript] // Actionscript
					[cc_actionscript3][/cc_actionscript3] // Actionscript 3
					[cc_css][/cc_css] // CSS Style Sheet
					[cc_html][/cc_html] // HTML
					[cc_js][/cc_js] // Javascript
					[cc_objc][/cc_objc] // Objective-C
					[cc_php][/cc_objc] // PHP
					[cc_sql][/cc_sql] // SQL


Stop SOPA