Jquery plug-in | fade immagini di fondo

Pubblicato: novembre 9, 2011 in News, Programmazione
Tag:, , ,

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

Annunci
commenti
  1. Caleb Glad ha detto:

    Many thanks, good put up.

  2. Julie Thielemann ha detto:

    i inspired to see your collection..magnificent!!Many thanks for sharing!

  3. Bret Isenberger ha detto:

    Many thanks for the Fantastic Contest. Would really like to win!!

  4. Thank you for sharing excellent informations. Your site is very cool. I’m impressed by the details that you’ve on this blog. It reveals how nicely you perceive this subject. Bookmarked this website page, will come back for extra articles. You, my pal, ROCK! I found just the information I already searched everywhere and just couldn’t come across. What a perfect website.

  5. Busana Muslim ha detto:

    Regards for this rattling post, I am glad I found this site on yahoo.

  6. hotels greece ha detto:

    Merely a smiling visitor here to share the love (:, btw great style. “The price one pays for pursuing a profession, or calling, is an intimate knowledge of its ugly side.” by James Arthur Baldwin.

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...