Posts Tagged ‘jquery’

Slideshow con jQuery e jCycle

Posted in Web Dev on April 18th, 2009 by ildipendente – 4 Comments

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..