Mi piacerebbe fare una presentazione completa del plugin Groject.ImageSwitch.yui.js, ma mi soffermerò ad un esempio un po’ “architettonico” che mi ha permesso di giocare un po’ con gli array di javascript. Nel codice che segue, definisco un array che è formato dai nomi delle immagini che si vogliono mostrare una dopo l’altra.
Per non utilizzare una variabile contatore, ho usato uno stratagemma particolare. In verità, credo si tratti di pessima programmazione, perchè rende il tutto meno leggibile. L’idea è quella di usare il primo elemento dell’array come contatore e ad ogni ciclo si carica l’immagine in posizione (imgs[0]++%(imgs.length-1))+1. Un codice di questo tipo è molto comodo in quanto l’aggiunta o l’eliminazione di un’immagine dall’array, comporta ZERO modifiche al resto del codice javascript. Non dipende da nulla se non dall’array di immagini. L’idea è quella di avere un contatore che venga incrementato ad ogni click. Allo stesso tempo, il valore di questo contatore in modulo a imgs.length-1 ci darà la posizione dell’indice. Il +1 finale ci serve perchè non dobbiamo avere imgs[0] come immagine perchè non lo è.
Altra piccola questione: l’immagine che deve essere caricata nel codice html, deve coincidere con l’ultima dell’array.
Esempio semplice
<html>
<head>
<title>Groject.ImageSwitch.yui.js Plugin</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="Groject.ImageSwitch.yui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
imgs = new Array (0,"17082009263.jpg","17082009258.jpg","19022009195.jpg");
$("#Imgs").click(function(){
$(this).ImageSwitch({
Type:"FadeIn",
NewImage:imgs[(imgs[0]++%(imgs.length-1))+1],
Speed:150});
});
});
</script>
</head>
<body>
<img src="19022009195.jpg" id="Imgs" width="300" />
</body>
</html>
