Posts contrassegnato dai tag ‘fade immagini di fondo’

Oggi prleremo di un plug-in Jquery da me ideato.

Si tratta di una slideshow di immagini di fondo ai nostri siti.

Per il momento gli unici parametri configurabili sono il tempo di permanenza delle immagini e il loro fade di ingresso.

Il tutto è molto semplice.

Poche mosse ed è tutto pronto.

Scaricate Jquery 1.4.2 o superiore , il foglio di stile (CSS) e lo script (javascript) di fadebackground (link in fondo).

Inserite il tutto all’interno del tag head della vostra masterPage in questo modo:


<head>
<title></title>
<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/fadeBackground.js" type="text/javascript"></script>
<link href="css/fadebackground.css" rel="stylesheet" type="text/css" />
</head>

Benissimo ora siamo pronti a posizionare le immagini.

Immettiamo subito dopo il tag body un tag DIV con le immagini nel seguente modo:


<div id="bgFader"><img src="immagini/rotazione/panorama.jpg" alt="" />
<img src="immagini/rotazione/panorama-piazzola.jpg" alt="" />
<img src="immagini/rotazione/pescatori.jpg" alt="" />
<img src="immagini/rotazione/piazzola.jpg" alt="" />
<img src="immagini/rotazione/solarium.jpg" alt="" />
</div>

Si faccia particolare attenzione all’ID del tag DIV. DEVE ESSERE SCRITTO COME IN ESEMPIO

Benissimo.

Ora sempre all’interno della nostra pagina master dobbiamo identificare il contenitore base.

Per una msterpage aspx il contenitore sarà identificato da una cosa del genere:


<div id="content"  >
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>

Ecco. Noi dobbiamo identificare il tag DIV contenitore del ContentPlaceHolder con l’ID content.

Ultimo passo e avviare lo script.

Come?

Semplice.

A fine masterpage inserite lo script cosi come segue:


<script>
fadebackground.init();

</script>

Dopo ciò abbiamo finito il vostro fade dovrebbe partire senza alcun problema.

Come sopra anticipato si possono cofigurare, er l momento, solo 2 parametri:

time – tempo di permanenza

fade – tempo di ingresso dell’immagine

Di default il tempo di permanenza è di 5 secondi e quello di fade e 3 secondi ma cambiabile a piacmento.

esempio di codice:


<script>
fadebackground.init({
fadeIn: 5000,
time:15000
});
</script>

Con questo esempio abbiamo impostato un tmo di permanenza delle foto  a 15 secondi e un fade di 5.

Spero di essere stato abbastanza chiaro nell’esprimermi.

Per qualsiasi chiarimento sono qui.

Saluti.

Link dowload JQUERY

Link download CSS fadeBackground

Link download Script fadeBackground