Choco-Slider è un’ottima galleria per immagini realizzata in jQuery leggera e compatibile con la maggior parte dei browser.
Pesa solo 7 kb è completamente customizzabile ed è rilasciato sotto licenza MIT (OpenSource)
Compatibile con Firefox (dalla versione 2 in poi), IE (dal 6 in poi), Chrome (dal 3 in poi), Opera (dal 9 in poi) e Safari.
Viene visualizzata correttamente anche dai dispositivi mobili Apple come iPhone e Ipad.
Una volta scaricato il pacchetto inserite all’interno della pagina il seguente codice:
<pre>
<link rel=”stylesheet” href=”chocoslider.css” type=”text/css” />
<script type=”text/javascript” src=”jquery.min.js”></script>
<script type=”text/javascript” src=”jquery.chocoslider.js”></script>
</pre>
A questo punto dovrete inserire il contenitore che mostra la gallery cambiando a vostro piacimento il nome delle immagini e il relativo alt
<div class=”choco-contenedor”>
<div id=”choco-contenido”>
<div id=”choco-slider”>
<img src=”img/img_1.jpg” alt=””/>
<img src=”img/img_2.jpg” alt=””/>
<img src=”img/img_3.jpg” alt=””/>
<img src=”img/img_4.jpg” alt=””/>
<img src=”img/img_5.jpg” alt=””/>
</div>
<div id=”control”></div>
</div>
</div>
Prima della fine del file aggiungete la chiamata a Choco-Slider
<script type=”text/javascript”>
$(document).ready(function() {
$(“#choco-slider”).chocoslider();
});
</script>
E’ possibile customizzare molti aspetti della gallery. Ecco i valori:
– width: 500, (larghezza dello slider)
– height: 332, (altezza dello slider)
– numberStrips: 20, (il numero di strisce usate per la transizione)
– auto: true, (se vuoi che lo slide parta automaticamente)
– autopause: true, (per fermare lo slider dopo un click)
– sliderDelay: 3000, (il tempo che intercorre tra un’immagine e l’altra)
– speedStrip: 500, (velocità delle strisce di transizione)
– transparencyTitle: 0.7, (trasparenza del titolo)
– speedTitle: 1000, (velocità del titolo)
– effect: ‘effect1’ (seleziona il tipo di transizione. ce ne sono 3 disponibili)
Potete scarica lo slider qui
