Esempio qui
Compatibilità:
-
- ![]()
Anzichè "lavorare" sull'html, questo plugin andrà a creare l'html.
A differenza di molti Fade che si trovano per il web, che caricano tutto l'html ( e quindi deve 'scaricare' tutte le immagini all'avvio della pagina), il mio plugin le scaricherà una alla volta, quando cioè è il turno di effettuare il fade su quell'immagine.
In tal modo quando il fade verrà effettuato per molte immagini, le prestazioni miglioreranno notevolmente
Specifiche di progetto:
- Prima di includere il plugin, va inclusa la libreria Jquery, scaricabile qui.
Prima di tutte va inclusa la libreria e poi il plugin, invertendo la chiamata ai due '.js', non funziona il tutto - Il codice HTML è molto semplice: deve essere un semplice div nel quale verranno sucessivamente inserite le immagini..
E' preferibile indicare la dimensione di tale div.
Parametri passabiti al Plugin:
- array_image ( array contenente le immagini che dovranno effettuare il fade)
Le immagini dovranno includere il percorso completo - width (indica la lunghezza dell'immagine; è obbligatoria per il corretto funzionamento; numero intero)
- height(indica l' altezza dell'immagine; è obbligatoria per il corretto funzionamento; numero intero)
- fade_intervall(indica il tempo di attesa tra l'incremento e il decremento dell'opacità dell'immagine; slow/medium/fast )
- fade_step (indica di quanto deve essere incrementata o decrementata l'opacità di ogni immagine ; slow/medium/fast )
- pause_change ( indica il tempo di attesa tra il fade di un immagine e quella sucessiva; slow/medium/fast )
ESEMPIO DI CODICE HTML:
<div id ='generale' style='margin-left:30px; height:200px'>
</div>
ESEMPIO DI CHIAMATA:
$(document).ready(function(){
var array_immagini = new Array();
array_immagini[0]="image/1.jpg";
array_immagini[1]="image/2.jpg";
array_immagini[2]="image/3.jpg";
array_immagini[3]="image/4.jpg";
$("#fade_uno").OptimalFadeImage({
array_image : array_immagini,
width : 150,
height : 124,
fade_intervall : 'medium',
fade_step : 'fast',
pause_change : 'slow'
});
});
Ecco i link per scaricare il plugin in forma ridotta:
Versione 1.0