Appuntamento con i tutorial su jQuery dove oggi parleremo di kwicks, un plugin che sfrutta la libreria jquery che si può adattare a diversi scopi.
In questo tutorial vedremo come realizzare una home page originale, diversa da quelle a cui siamo abituati. Guarda subito l’esempio per capire di cosa si tratta.
Nell’esempio ho preso quattro super donne (per non dire altro 
), ma potresti benissimo mettere 4 immagini che rappresentano quattro sezioni importanti del sito, con ovviamente l’aggiunta del logo, il menu e il footer.
Voglio precisare che già esiste una documentazione con degli esempi nella pagina dell’autore del plugin, però dal mio punto di vista non ne fanno capire bene tutte le potenzialità.
Procediamo con il tutorial e per seguirlo al meglio ti consiglio di scaricare prima i sorgenti.
Passo 1. Inizializzazione dello script
Come prima cosa inizializziamo lo script inserendo tra i tag head le seguenti righe di codice.
Passo 2. Codice HTML
Il codice HTML è una semplice lista non ordinata, dove per ogni elemento viene inserita l’immagine opportuna, ognuna collegata alla pagina interna del sito corrispondente.
Passo 3. Un po’ di stile
Anche il CSS va modificato in minima parte, rispetto all’originale. In particolare basterà modificare le dimensioni degli elementi nella lista (.kwicks li).
.kwicks li{
/* these are required, but the values are up to you (must be pixel) */
width: 200px;/*deve essere inferiore alla larghezza effettiva*/
height: 500px;
Passo 4. Applichiamo lo script
Infine basta applicare lo script, alla classe .kwicks, sempre tra i tag head.
L’effetto si può personalizzare, modificandone ad esempio la velocità, l’apertura degli elementi al clic e non al passaggio del mouse ecc. Tutte le personalizzazioni le trovi sempre nella pagina del plugin.
11 ottobre 2010 at 10:23
Sei sicuro che si basi su mootools? A me sembra tanto un plugin per jquery.
Anche il sito a cui rimandi pare attestare la stessa cosa.
11 ottobre 2010 at 10:42
Ciao eineki e benvenuto nel blog
Ti ringrazio molto per la segnalazione, hai ragione: questo plugin lo conoscevo già da un po’ di tempo ed era nato per mootools. Ero rimasto a quell’idea non accorgendomi, nella fretta, che ora si basa su jQuery. Grazie mille!
11 ottobre 2010 at 16:41
Ma questi tutorial presuppongono conoscenze di Xhtml Css e Jscript giusto?
11 ottobre 2010 at 17:12
Ciao Carlo, diciamo che un minimo di conoscenza la devi avere, ma comunque i tutorial cerco di realizzarli anche per persone meno esperte.
Poi l’invito è quello di scaricare i sorgenti e di provare a modificarli per capirne bene il funzionamento.
11 ottobre 2010 at 23:12
Belle signore
11 ottobre 2010 at 23:30
In questo blog puoi trovare solo belle signore
12 ottobre 2010 at 12:40
eh già! Hai sicuramente una certa dote nella scelta delle immagini
12 ottobre 2010 at 16:24
3 novembre 2010 at 19:20
Grazie mille Fede, grazie al tuo tutorial (più precisamente a un commento all’interno dell’esempio, quello che dice di scrivere i css prima del js) ho trovato il motivo per cui il plug-in dava problemi sul mio sito!
4 novembre 2010 at 13:53
Ciao Anna! ho visto che lo hai applicato per il portfolio. Sai cosa? io proverei a farlo al clic del mouse e non al passaggio del mouse, che dici?
23 novembre 2010 at 09:41
Ciao Fede, seguo i tuoi tutorial da un po’, semplicemente fantastici.
In riferimento a questo però ho un problema. Ho seguito le tue istruzioni passo passo e non mi funziona solo l’effetto del “mouseover()”. Lo sto facendo con due immagini e mi succede che quando mi metto sopra la prima immagine, questa non si espande. Stesso discorso se mi sposto il mouse sopra la seconda immagine. puoi aiutarmi?
23 novembre 2010 at 10:40
Ho risolto, era un problema di conflitti. Grazie mille ancora per gli splendidi tutorial.
23 novembre 2010 at 17:06
Ottimo! Il sito è già on line? sono curioso di vederlo!
24 novembre 2010 at 07:52
Nulla di speciale, però mi piace il risulatato
. Se vuoi vederlo il sito è:
http://www.livedancing.it/gallery.htm
Grazie mille per tutto, continua sempre così
24 novembre 2010 at 23:23
Ottima idea! ma secondo me se usi anche delle immagini l’effetto viene più di impatto
25 novembre 2010 at 07:21
Dici l’immagine al posto della scritta? Visto che il sito si presenta in stile molto elegante e molto sobrio , un’immagine al posto della scritta mi ci stona un po’, non credi?