JavaScript  »  Articoli  »  Effetti e controlli Javascript 

Ci sono alcuni validi motivi per cui non è sempre consigliabile il ricorso ad "ammennicoli" JavaScript: dopo un'analisi attenta si rivelano non sempre utili, a volte si possono trovare soluzioni alternative altrettanto funzionali, non sempre danno garanzie di sviluppi futuri o correzione di bug e non sempre sono abbastanza flessibili per le nostre esigenze di sviluppo.

Step Carousel Viewer

Per inserire una galleria JavaScript scorrevole in un CMS open-source cercavo una galleria che fosse compatibile con il framework jQuery, che fosse leggera, facile da implementare e personalizzabile. Di gallerie di questo tipo ce ne sono tantissime, ma dopo un po’ di ricerche mi sono soffermato a testare Step Carousel Viewer.

Le specifiche sembravano buone: solo 18KB, tag non intrusivi, funzioni ben personalizzabili.

Installazione

Il primo passo è scaricare jQuery e incorporarlo nell’head della pagina:

<script type="text/javascript"   src="js/jquery-1.4.2.min.js"></script>

Altrettanto facciamo per lo script Step Carousel Viewer dal sito http://www.dynamicdrive.com/ (per motivi di copyright vanno lasciati i commenti nel tag script).

<script type="text/javascript"   src="js/stepcarousel.js">
/***********************************************
* Step Carousel Viewer script- (c) Dynamic Drive DHTML code library 
(www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML   scripts
* This notice must stay intact for legal use
***********************************************/
</script>

La parte HTML

Quindi si passa al codice HTML per definire la struttura della gallery scorrevole:

<div id="mygallery" class="stepcarousel">

  <div class="belt">
    <div class="panel"><img src="ima/demo.jpg" /></div>
    <div class="panel"><img src="ima/demo.jpg" /></div>
    <div class="panel"><img src="ima/demo.jpg" /></div>
    <div class="panel"><img src="ima/demo.jpg" /></div>
    <div class="panel"><img src="ima/demo.jpg" /></div>
  </div>

</div><!--/stepcarousel-->

Altri articoli

Altre guide

Altre newsletter