|
jQuery ed il plugin cycle |
|
|
|
Scritto da Matteo Parrucci
|
|
venerdì 12 ottobre 2007 |
jQuery ed i suoi plugin:
Uno dei grandi punti di forza di jQuery sono i plugin: sono una gran quantità e sono molto semplici da usare.
Il plugin cycle:Uno dei primi plugin a cui mi sono avvicinato è stato cycle che serve a ciclare tra le foto contenute in uno stesso div. La facilità di utilizzo è quasi imbarazzante tanto che, solo modificando le impostazioni di chiamata del plugin ho creato questa pagina
di esempio.
Modularità dei plugin (cycle ed easing)
Un altro punto di forza notevole di jQuery è la facilità di utilizzare alcuni plugin all'interno di altri. Come potete vedere nella pagina di esempio infatti al plugin cycle è associato, durante la transizione tra una foto e l'altra, il plugin easing che applica l'effetto di transizione in maniera non lineare. Ad esempio i due effetti a scorrimento verticale "rimbalzano" mentre quello orizzontale và oltre la fine della trasizione e poi torna indietro.
La semplicità di jQuery: Write Less, Do More.
Lo slogan di JQuery, che potete vedere nell'immagine, è "write less, do more". Tutto il codice core ed i plugin si ispirano a questo principio. Infatti il codice che c'è dietro alla pagina di esempio in realtà è talmente semplice da risultare banale!
Finalmente il codice:
La prima cosa da fare è l'import delle librerie necessarie:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="cycle.js"></script>
<script type="text/javascript" src="easing.js"></script>
Il secondo passo è quello di creare la struttura html (i contenitori div con dentro le foto) :
<div id="foto_wrapper1"><h1>Cinque Terre</h1>
<div id="nav1" class="nav"></div>
<div id="foto1" class="pics">
<img src="./path/to/image.jpg" height="300" width="400">
.....
</div>
<span id="prev1" class="prev"><img src="./images/prev.png"></span>
<span id="next1" class="next"><img src="./images/next.png"></span>
<span class="play_stop">
<span onclick="pause(1);" id="stop1" class="stop"><img src="./images/pause_active.png"></span>
<span onclick="resume(1);" id="play1" class="play"><img src="./images/play.png"></span>
</span>
</div>
<div id="foto_wrapper2"><h1>Saragozza</h1>
<div id="nav2" class="nav"></div>
<div id="foto2" class="pics">
<img src="./path/to/image.jpg" height="300" width="400">
.....
</div>
<span id="prev2" class="prev"><img src="./images/prev.png"></span>
<span id="next2" class="next"><img src="./images/next.png"></span>
<span class="play_stop">
<span onclick="pause(2);" id="stop2" class="stop"><img src="./images/pause_active.png"></span>
<span onclick="resume(2);" id="play2" class="play"><img src="./images/play.png"></span>
</span>
</div>
Come vedete la struttura html è semplice: è sufficiente mettere le immaigni dentro un div. Le restanti linee di codice servono per creare i link numerati sopra l'immagine (nav) ed i bottini next, prev, pause e play.
Per quanto riguarda la navigazione, il next ed il prev è sufficiente un tag vuoto con un certo id che passeremo alla funzione di cyle.
Per quanto riguarda il pause ed il resume richiamano delle funzioni javascript che definiamo sotto.
Ora il codice javascript che permette di fare ciclare le foto:
$(document).ready(function(){
$(foto_wrapper1).cycle({fx:'turnDown', delay:-2000, easing:'bounceout', next:'#next1', prev:'#prev1', pager:'#pager1'});
$(foto_wrapper2).cycle({fx:'scrollRight', delay:-2000, easing:'backout', next:'#next2', prev:'#prev2', pager:'#pager2'});
$(foto_wrapper3).cycle({fx:'scrollDown', delay:-2000, easing:'bounceout', next:'#next3', prev:'#prev3', pager:'#pager3'});
$(foto_wrapper4).cycle({fx:'turnDown', delay:-2000, easing:'bounceout', next:'#next4', prev:'#prev4', pager:'#pager4'});
}
function resume(num){
$('#next'+num).click();
$('#foto'+num).cycle('resume');
$('#play'+num).html('<img src="./images/play_active.png" />');
$('#stop'+num).html('<img src="./images/pause.png" />');
}
function pause(num){
$('#foto'+num).cycle('pause');
$('#play'+num).html('<img src="./images/play.png" />');
$('#stop'+num).html('<img src="./images/pause_active.png" />');
}
La prima funzione che si attiva quando la pagina si è caricate sul browser (funziona come il body onload) Applica l'effetto cycle ai div dentro i quali stanno le fotografie.
La seconda e la terza funzione
definiscono il comportamento dei tasti pause e resume che rispettivamente fermano o fanno ripartire il filmato modificando l'immagine del tasto clickato.
 Quota questo articolo sul tuo sito
1. bello
Scritto da mork, alle 17-11-2008 09:10 , IP: 84.223.232.15
bravo.
l'articolo mi è stato utile.
ciò che stupisce il niubbo (=newbie) è la ASSOLUTA semplicità.
Ripeto una cosa che tu già dici, ma io ci ho messo un paio di minuti a capirla.
Cioè basta veramente un e tutto quello che c'è dentro , , e quant'altro, cicla!!! |
Solo gli utenti registrati possono lasciare commenti
Loggati o registrati. |
Commenti (1)
