Slideshow con jQuery e jCycle
In questi giorni ho lavorato al restyling di un sito. Una delle richieste principali del cliente era la possibilità di avere uno slideshow di immagini nelle homepage.. se una immagine vale più di mille parole molte immagini valgono più di molte parole!!! (aggiungerei anche che non ci sono più le mezze stagioni)
Cercando quà e la mi sono imbattuto in un plugin per jQuery veramente carino: jQuery Cycle Plugin
I plugin è veramente ben fatto: ci sono un molti effetti di transizione diversi e un sacco di opzioni. Se come nel mio caso vi serve solo l’effetto “fade” potete scaricare la versione Core (e risparmiate qualche KB che male non fà)
Far funzionare il tutto è veramente semplice:
- includete nella vostra pagina jquery (versione 1.2.3 o successive):
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
- includete jcycle:
<script type="text/javascript" src="jquery.cycle.min.js"></script>
- definite un contenitore per le vostre immagini: il vecchio <div> va benissimo
<div class="pics"> <img src="images/beach1.jpg" width="200" height="200" /> <img src="images/beach2.jpg" width="200" height="200" /> <img src="images/beach3.jpg" width="200" height="200" /> </div> - attivate lo slideshow
jQuery(document).ready(function(){ $('#pics').cycle({ fx: 'fade', speed: 2500 }); });
Facile no? 
Degno di nota anche la sezione del sito che permette di vedere i vari effetti all’opera
Ps: nella pagina di download di parla anche di un Cycle Lite Plugin.. l’ho provato ma non sono riuscito a farlo funzionare..
Ciao,
molto bella questa libreria, però ha un limite che io non sono capace di superare… Nel caso abbia molte immagini da caricare, come faccio a rendere la pagina leggera da caricare?
se hai molte immagini e le vuoi caricare tutte in una pagina non hai molta scelta…
Quello che si potrebbe cercare di fare è questo:
- all’apertura della pagina si caricano solamente le immagini che vengono visualizzate nello slideshow
- quando si fa scorrere lo slideshow le nuove immagini da visualizzare vengono caricare al volo via ajax
però è una cosa che non ho mai sperimentato
!
In questa pagina http://malsup.com/jquery/cycle/options.html ci sono tutte le opzioni di configurazione del plugin… forse c’è qualcosa che può essere utile.
Se fai qualche prova fammi sapere il risultato
io ho una domanda. Devo realizzare un sito per un immobiliare e come tutti devo realizzare le schede tecniche degli immobili. La mia questione è posso inserire in ogni immobile una presentazione delle immagini con questo script? In questo modo allora prendo i file dal database leggo la cartella dove si trovano le immagini di ogni relativo immobile (quindi il percorso sara diverso ogni volta), risultato presentazione delle immagini di ogni immobile via slideshow. Questa cosa è possibile oppure no? Ho gia fatto delle prove ma come inserisco in una pagina piu di una slideshow non funziona piu niente spero in un aiuto. Grazie
@maurizio: direi che quello che vuoi ottenere è possibile. Si tratta solo di recuperare dinamicamente il percoso delle immagini e di caricarle…
A quanto ne sò è possibile avere più slideshow in ogni pagina. Non ho fatto prove ma se guardi nella homepage del plugin (http://malsup.com/jquery/cycle/) ci sono diversi esempi, tutti in una pagina sola, quindi direi che si possa fare senza problemi.