Nicola Ferrari - Ferro

Al mondo ci sono solo 10 tipi di persone: chi comprende il sistema binario e chi no

 

Plugin Jquery: OptimalFade

 

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