jQuery è una libreria Javascript molto diffusa, è facile da utilizzare anche dai non programmatori e grazie alle centinaia (migliaia?) di plugin possiamo inserire nei nostri siti praticamente qualsiasi effetto o utility a livello di interfaccia ci venga in mente.
Come consiglio generale mi sento di dire che è sempre bene non esagerare con gli effetti nelle pagine ma per esigenze di navigazione, di presentazione o di spazio uno slider ben personalizzato fa sempre comodo…
JQuery Tools
Quale plugin scegliere per questo scopo? I suggerimenti sono sempre ben accetti, ma ultimamente mi sto concentrando su quelli messi a disposizione da jQuery Tools (http://flowplayer.org/tools/index.html). La filosofia dei creatori è rendere semplice e veloce integrare le interfacce utente veramente indispensabili; bando quindi a drag-and-drop, sortables e resizables.
È necessario un piccolo Javascript da 5.72 Kb (con compressione gzip). La logica di programmazione è ben separata dal design rendendo semplice l’integrazione per utenti alle prime armi o programmatori esperti.
Dalla pagina di download [http://flowplayer.org/tools/download.html] possiamo personalizzare il Javascript spuntando semplicemente gli effetti desiderati; in questa guida utilizzerò lo scrollable da 10.47 kb (3.37 kb con compressione gzip).
Setup di base
L’esempio più semplice è una galleria scrollabile orizzontalmente con due pulsanti o con le frecce destra e sinistra.
Per iniziare è sufficiente caricare i due script jQuery e jQuery Tools nella sezione head della pagina:
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tools.min.js"></script>Il codice HTML base è molto pulito, composto da due ancore (a) per i pulsanti di navigazione che nel CSS esterno vengono sostituiti da due immagini e da un paio di div che indicheranno al Javascript quali sono gli oggetti scrollabili e il contenitore fisso:
<!-- "azione per spostarsi alla pagina precedente -->
<a class="prevPage browse left"></a>
<!-- elemento div contenitore per scrollable -->
<div class="scrollable">
<!-- elemento div per i singoli item -->
<div class="items">
<!-- 1-5 -->
<img src="ima/img001.png" />
<img src="ima/img001.png" />
<img src="ima/img001.png" />
<img src="ima/img001.png" />
<img src="ima/img001.png" />
<!-- 5-10 -->
<img src="ima/img001.png" />
<img src="ima/img001.png" />
<img src="ima/img001.png" />
<img src="ima/img001.png" />
<img src="ima/img001.png" />
<!-- 10-15 -->
<img src="ima/img001.png" />
<img src="ima/img001.png" />
<img src="ima/img001.png" />
<img src="ima/img001.png" />
<img src="ima/img001.png" />
</div>
</div>
<!-- "azione per spostarsi alla pagina successiva -->
<a class="nextPage browse right"></a>Poche righe di semplice Javascript attivano lo scrollable, è sufficiente indicare il div contenitore (div.scrollable, ovvero il div con classe scrollable):
<script>
$(function() {
$("div.scrollable").scrollable();
});
</script>I due CSS esterni scrollable-horizontal.css e scrollable-buttons.css si occupano della presentazione a livello visuale. Nel codice CSS originale dell’esempio è indicato che il div principale deve essere posizionato assolutamente.
Modificando semplicemente il Javascript con $("div.scrollable").scrollable().circular(); richiamiamo il plugin Circular che rende lo scroll infinito.
Esistono infatti quattro plugin (nella pagina di download di jQuery Tools si può scegliere quali scaricare) che possono attivare funzioni utili come Circular (scrolling infinito), Navigator (attiva dei pulsanti aggiuntivi di navigazione), Autoscroll (scrolling automatico), Mousewheel (scrolling attivato con rotella di scorrimento del mouse).
Esempio 2: alternative scrolling
Uno scroll attivato al click del mouse sopra l’immagine, semplice ed efficace per header o per visualizzare più immagini in buona risoluzione senza necessariamente usare il solito Lightbox.
Il codice HTML è minimale, un paio di div contenitori e la serie di immagini da visualizzare in sequenza:
<div class="scroll">
<div class="pics">
<img src="ima/img002.png" />
<img src="ima/img002.png" />
<img src="ima/img002.png" />
</div>
</div>Lo scroll si attiva sempre con una semplice riga di codice, con size:1 indichiamo che vogliamo visualizzare un elemento per volta (in questo caso un’immagine ma jQuery Tools Scrollable funziona anche con altri oggetti tipo Flash, etc):
<script>
$(function() {
$(".scroll").scrollable({size: 1, loop: true});
});
</script>Il CSS “blocca” il div principale con misure fisse e overflow:hidden; al suo interno scorreranno le immagini. Il CSS è inserito in un file esterno chiamato alternative.css:
.scroll {
position:relative;
overflow:hidden;
width: 394px;
height: 266px;
clear: both;
}
.scroll .pics {
width:20000em;
position:absolute;
clear:both;
}
.pics img {
float:left;
cursor:pointer;
width:400px;
margin:0px;
}Ecco l'esempio.
Esempio 3: Vertical scroll
È una personalizzazione per creare uno scroll verticale utile in svariate situazioni, composto da una lista che fungerà da navigazione e un div in cui scorreranno le immagini o contenuti più complessi.
Ecco la demo.
Inseriamo come negli esempi precedenti i due script jQuery e jQuery.Tools:
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tools.min.js"></script>Creiamo un div contenitore che racchiude sia la lista di navigazione che il div contenente gli elementi scrollabili, in questo caso una serie di immagini ma possiamo inserire qualsiasi codice HTML e personalizzarlo via CSS secondo le esigenze di design e contenuti desiderati. Nella lista di navigazione ho inserito delle miniature con del testo che potremo usare come didascalia dell’immagine o come testo di presentazione del contenuto.
<div id="contenitore">
<ul id="navigazione">
<li><img src="ima/img004-tumb.jpg" alt="" />[link #1]</li>
<li><img src="ima/img004-tumb.jpg" alt="" />[link #2]</li>
<li><img src="ima/img004-tumb.jpg" alt="" />[link #3]</li>
<li><img src="ima/img004-tumb.jpg" alt="" />[link #4]</li>
</ul>
<div id="main">
<div id="pages">
<div class="page"><img src="ima/img004.jpg" alt="" /></div>
<div class="page"><img src="ima/img004.jpg" alt="" /></div>
<div class="page"><img src="ima/img004.jpg" alt="" /></div>
<div class="page"><img src="ima/img004.jpg" alt="" /></div>
</div>
</div>
</div>Aggiungendo il CSS (completamente esterno) la presentazione è completa, le parti più importanti sono gli stili per la lista, ognuno potrà personalizzarlo secondo le esigenze, aggiungendo ad esempio sfondi sul mouseover o altri effetti:
#navigazione {
float: left;
padding: 0px !important;
margin: 0px !important;
}
#navigazione li {
background-color: #333;
border-bottom: 1px solid #666;
clear: both;
color: #FFF;
font-size: 12px;
height: 75px;
line-height: 75px; /**/
list-style-type: none;
padding: 10px;
width: 190px;
cursor: pointer;
}
#navigazione li img {
border: 1px solid #666;
margin-right: 1em;
vertical-align: top;
}Il codice Javascript per attivare lo scroll verticale è minimale e si basa principalmente sui parametri vertical: true e size:1:
<script>
$(function() {
$("#main").scrollable({
// basic settings
vertical: true,
size: 1,
clickable: false,
}).navigator("#navigazione");
});
</script>Il limite del jQuery Tools Scrollable è solamente la personalizzazione della presentazione visiva, HTML + CSS, lo script pensa al resto con molte opzioni da sfuttare.
Tutti gli esempi visti sono disponibili per il download.
